https://github.com/namlehoangdev/react-native-anchor-carousel
A simple swipeable carousel for React Native which anchor two side of list.
https://github.com/namlehoangdev/react-native-anchor-carousel
anchor carousel flatlist paging scrollview swipable swiper
Last synced: about 2 months ago
JSON representation
A simple swipeable carousel for React Native which anchor two side of list.
- Host: GitHub
- URL: https://github.com/namlehoangdev/react-native-anchor-carousel
- Owner: namlehoangdev
- License: mit
- Created: 2019-05-24T08:19:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-09-18T10:33:07.000Z (over 2 years ago)
- Last Synced: 2024-08-09T21:27:09.032Z (10 months ago)
- Topics: anchor, carousel, flatlist, paging, scrollview, swipable, swiper
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-anchor-carousel
- Size: 8.1 MB
- Stars: 124
- Watchers: 3
- Forks: 30
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-anchor-carousel
----
[](https://travis-ci.org/joemccann/dillinger)
A simple swipeable carousel for React Native which anchor two side of list.
### Installation
Install the dependency.
```sh
$ npm install react-native-anchor-carousel
```
```sh
$ yarn add react-native-anchor-carousel
```
\
For older version, install **3.1.2**
```sh
$ npm install [email protected]
```
```sh
$ yarn add [email protected]
```
### Example
__**[Expo snack demo here](https://snack.expo.io/@lehoangnamuit/react-native-anchor-carousel)**__
__**[full example here](https://github.com/lehoangnam97/react-native-anchor-carousel/tree/master/example)**__
```javascript
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:**
```javascript
const carouselRef = React.useRef(null);
renderItem = ({item, index}) => {
return (
{
carouselRef.current.scrollToIndex(index);
}}>
...
);
}
return ()
```
\
**Traditional Class Component version:**
```javascript
renderItem = ({item, index}) => {
return (
{
this.numberCarousel.scrollToIndex(index);
}}>
...
);
};
render() {
return (
{
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](https://facebook.github.io/react-native/docs/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](https://reactnative.dev/docs/flatlist) | | | |
| *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](https://github.com/archriss/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!**