Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kkemple/react-native-sideswipe

Simple React Native carousel with sensible defaults
https://github.com/kkemple/react-native-sideswipe

Last synced: about 2 months ago
JSON representation

Simple React Native carousel with sensible defaults

Lists

README 

        
# Sideswipe

A simple, cross-platform React Native swipeable carousel with sensible defaults



## Looking for maintainers!!

[DM me on Twitter!](https://twitter.com/theworstdev)



![demo1](./example-assets/sideswipe.gif)



![demo2](./example-assets/spaced-tesla.gif)



## Why Another Carousel?

Most solutions I found were very focused on mobile and adopt a paging pattern which limits what you can do on tablet and when you want the child to page when its smaller than the viewport.



On top of that most solutions were either one-size-fits-all or not really polished.



## What Makes Your Solution So Special?

Nothing. It's just a tiny simple carousel with a pretty flexible API. If you need more check out another solution, if you need less you might not need a carousel because this whole thing is ~200 lines. 😎



___



## API



### ``

Carousel component used to render carousel items via `renderItem` prop.



```js

type CarouselProps = {

  // applied to the content container within FlatList

  // |------------ [ style ]--------------------------|

  // | |---------- [ flatListStyle ] ---------------| |

  // | | |-------- [ contentContainerStyle ] -----| | |



  contentContainerStyle?: Styles,



  // This will equal the padding added to both left and right of itemWidth

  // e.g. const contentOffset = (viewport.width - itemWidth) / 2

  contentOffset?: number,



  // data for FlatList

  data: Array<*>,



  // used to set the unique key of each item in the carousel

  extractKey?: (item: *, index: number) => string,



  // applied to the content container within the content container

  // |------------ [ style ]--------------------------|

  // | |---------- [ flatListStyle ] ---------------| |

  // | | |-------- [ contentContainerStyle ] -----| | |

  flatListStyle?: Styles,



  // active index of the carousel

  index?: number,



  // This is the total width of everything that should be centered when in view

  // tip: be sure to include any margin added to the left and right of the item

  itemWidth?: number,



  // function called when the end of the carousel is reached

  onEndReached: () => void,



  // number between 0 - 1 used to determine when to call onEndReached

  onEndReachedThreshold: number,



  // fired when the active index for the carousel changes

  onIndexChange?: number => void,



  // offset from center of carousel item used for determining index

  threshold?: number,



  /**

   * drag distance examples with different thresholds

   *

   * with item width of 200 and no threshold

   * ---------------> <-----------------

   * 0 ------- -index/+index ------- 200

   *

   * with item width of 200 and 50 threshold

   * ---------->           <------------

   * 0 -- -index -- 100 -- +index -- 200

   *

   * with item width of 200 and 75 threshold

   * -------->               <----------

   * 0 - -index --- 100 --- +index - 200

   *

   * with item width of 200 and 90 threshold

   * ----->                      <------

   * 0 -index ----- 100 ----- +index 200

   */



  // to determine the index use the velocity of the gesture.

  useVelocityForIndex?: boolean,



  // render item method, similar to FlatList with some enhancements

  renderItem: CarouselRenderProps =>

    | Array | boolean>

    | React$Element<*>

    | null,



  // should we capture touch event

  shouldCapture?: GestureState => boolean,



  // should we release touch event to another view

  shouldRelease?: GestureState => boolean,



  // style for the FlatList wrapper View

  // |------------ [ style ]--------------------------|

  // | |---------- [ flatListStyle ] ---------------| |

  // | | |-------- [ contentContainerStyle ] -----| | |

  style?: Styles,



  // should we use native driver for animation

  useNativeDriver?: boolean,

}

```



```js

type CarouselRenderProps = {

  // index of item in data collection

  itemIndex: number,



  // active index of the carousel

  currentIndex: number,



  // total count of items in data collection

  itemCount: number,



  // item passed from FlatList

  item: *,



  // animated value tracking current index

  animatedValue: Animated.Value

}



```



___



## Usage:



```bash

yarn add react-native-sideswipe

```



```js

import { Dimensions } from 'react-native';

import SideSwipe from 'react-native-sideswipe';



import CustomComponent from '...'

import data from '...'



export default class SweetCarousel extends Component {

  state = {

    currentIndex: 0,

  };



  render = () => {

    // center items on screen

    const { width } = Dimensions.get('window');

    const contentOffset = (width - CustomComponent.WIDTH) / 2;



    return (

      

          this.setState(() => ({ currentIndex: index }))

        }

        renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (

         

        )}

      />

    );

  };

}

```



___



## Contributors



Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):



| [
Kurtis Kemple](https://twitter.com/kurtiskemple)
[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=kkemple "Code") [📖](https://github.com/kkemple/react-native-sideswipe/commits?author=kkemple "Documentation") [📝](#blog-kkemple "Blogposts") | [
Jason Brown](http://browniefed.com)
[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=browniefed "Code") [🤔](#ideas-browniefed "Ideas, Planning, & Feedback") | [
Akshay Kadam](https://twitter.com/deadcoder0904)
[📖](https://github.com/kkemple/react-native-sideswipe/commits?author=deadcoder0904 "Documentation") | [
Santosh Venkatraman](https://github.com/onstash)
[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=onstash "Code") | [
Narendra N Shetty](https://twitter.com/narendra_shetty)
[🤔](#ideas-narendrashetty "Ideas, Planning, & Feedback") | [
Zachary Gibson](https://twitter.com/zacharykeith_)
[🤔](#ideas-zachgibson "Ideas, Planning, & Feedback") | [
Chris Geirman](http://www.frogquest.com)
[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Ageirman "Bug reports") [📖](https://github.com/kkemple/react-native-sideswipe/commits?author=geirman "Documentation") [🤔](#ideas-geirman "Ideas, Planning, & Feedback") |

| :---: | :---: | :---: | :---: | :---: | :---: | :---: |

| [
Dan Sipple](https://github.com/sipplified)
[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Asipplified "Bug reports") [💻](https://github.com/kkemple/react-native-sideswipe/commits?author=sipplified "Code") | [
Brian B. Canin](http://www.briancanin.com)
[💻](https://github.com/kkemple/react-native-sideswipe/commits?author=cyphire "Code") [👀](#review-cyphire "Reviewed Pull Requests") | [
Michael Sevestre](http://www.design2code.ca)
[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Amsevestre "Bug reports") [🤔](#ideas-msevestre "Ideas, Planning, & Feedback") [⚠️](https://github.com/kkemple/react-native-sideswipe/commits?author=msevestre "Tests") | [
Soheil Jadidian](https://github.com/jadidian)
[🐛](https://github.com/kkemple/react-native-sideswipe/issues?q=author%3Ajadidian "Bug reports") [🤔](#ideas-jadidian "Ideas, Planning, & Feedback") |



This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!



___



## License

MIT