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 

Example

full example here

import Carousel from 'react-native-anchor-carousel';
<View style={styles.carouselContainer}>
     <Carousel  style={styles.carousel}
                data={data}
                renderItem={this.renderItem}
                itemWidth={200}
                containerWidth={width - 20} 
                separatorWidth={20}
                ref={(c) => {
                    this._carousel = c;
                }}
	        //pagingEnable={false}
            />
</View>
  renderItem = ({item, index}) => {
        const {backgroundColor} = item;
        return (
            <TouchableOpacity style={[styles.item, {backgroundColor}]}
                              onPress={() => {
                                  this._carousel.scrollToIndex(index);
                              }}>
                 .......
            </TouchableOpacity>)
    };
 
	const styles = StyleSheet.create({ 
		....
		carouselContainer: {
		    height:200  
		},
	    	carousel: {
	            flex:1
		} 
	})

Usages

This component currently just support only carousel for horizontal side carousel In version 2.2.0, It is now supported Flatlistprops

PropsDescriptionTypeDefaultRequired
dataArray of data for renderingArray[]Yes
renderItemstake each item from data and renders it. Function receives one agrument {item,index} and must return as React.ElementFunction() => {}Yes
initialIndexInitial starting focused item of listNumber0No
onScrollEndFired while scrollview end of scrollingFunction()=> {}No
pagingEnableEnable or disable autor scroll to closest itemBooleanFalseNo
containerWidthWidth of the carousel container boxnumberScreen widthYes
itemWidthWidth of each item in carouselNumber90% of screen widthYes
separatorWidthWidth of separator in carousel (cause it only support horizontal side at the present time)Number10No
inActiveScaleValue of the scale effect applied to inactive itemNumber0.85No
inActiveOpacityValue of the opacity effect applied to inactive itemNumber0.8No
styleStyle of the carousel container boxView style{}No
itemContainerStyleStyle for each carousel container itemView style{}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!