react-native-anchor-carousel
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 [email protected]$ yarn add [email protected] Example
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!