Necessary Pigeonholing Mechanism

    react-native-anchor-carousel

    4.0.1 • Public • Published

    react-native-anchor-carousel


    Build Status

    A simple swipeable carousel for React Native which anchor two side of list.

    Installation

    Install the dependency.

    $ npm install react-native-anchor-carousel 
    $ yarn add react-native-anchor-carousel 


    For older version, install 3.1.2

    $ npm install react-native-anchor-carousel@3.1.2
    $ yarn add react-native-anchor-carousel@3.1.2 

    Example

    Expo snack demo here


    full example here

    import Carousel from 'react-native-anchor-carousel';
    const {width: windowWidth} = Dimensions.get('window');
    const styles = StyleSheet.create({
     carousel: {
      flexGrow: 0,
      height: 150,
     }
    });


    Hook Component version:

    const carouselRef = React.useRef(null);
    renderItem = ({item, index}) => {
     return (
             <TouchableOpacity
                     style={styles.item}
                     onPress={() => {
                      carouselRef.current.scrollToIndex(index);
                     }}>
              ...
             </TouchableOpacity>
     );
    }
    return (<Carousel
            ref={carouselRef}
            data={Array(3).fill(0)}
            renderItem={renderItem}
            style={styles.carousel}
            itemWidth={windowWidth * 0.8}
            containerWidth={windowWidth}
            separatorWidth={0}
    />)


    Traditional Class Component version:

    renderItem = ({item, index}) => {
     return (
             <TouchableOpacity
                     style={styles.item}
                     onPress={() => {
                      this.numberCarousel.scrollToIndex(index);
                     }}>
              ...
             </TouchableOpacity>
     );
    };
    
    render() {
     return (
             <Carousel
                     style={styles.carousel}
                     ref={c => {
                      this.numberCarousel = c;
                     }}
                     data={Array(3).fill(0)}
                     renderItem={this.renderItem}
                     itemWidth={windowWidth * 0.8}
                     separatorWidth={0}
                     containerWidth={windowWidth}
             />
     );
    }

    Usages

    This component currently just support only carousel for horizontal side carousel From version 2.2.0.
    It is now supported Flatlist props from version 3.0.0 Change scroll behavior of previous versions
    From version 4.0.0 it has been moved to Functional component and fix separator bug

    Props Description Type Default Required
    data Array of data for rendering Array [] Yes
    renderItems take each item from data and renders it. Function receives one agrument {item,index} and must return as React.Element Function () => {} Yes
    keyExtractor Key extractor for each item of list Function (item, index) => index.toString() Should
    Other Flatlist Props Other Flatlist Props
    minScrollDistance Minimum distance when scrolling to move to the next item. Notice this property when you need to improve smoothness Number 5 No
    containerWidth Width of the carousel container box Number Screen width Yes
    itemWidth Width of each item in carousel Number 90% of screen width Yes
    separatorWidth Width of separator in carousel (cause it only support horizontal side at the present time) Number 10 No
    inActiveScale Value of the scale effect applied to inactive item Number 0.8 No
    inActiveOpacity Value of the opacity effect applied to inactive item Number 0.8 No
    style Style of the carousel container box View style {} No
    itemContainerStyle Style for each carousel container item View style {} No
    onScrollEnd Fired while scrollview end of scrolling Function ()=> {} No
    initialIndex Initial starting focused item of list Number 0 No

    References from

    This library is written after taking reference from react-native-snap-carousel

    Development

    Welcome everybody to contribute ! Hope this simple carousel can help somebody for fast develope react-native app!

    Todos

    • Cover vertical side carousel

    License

    MIT

    Free Software, Hell Yeah!

    Install

    npm i react-native-anchor-carousel

    DownloadsWeekly Downloads

    1,376

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    14.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • lehoangnam97