# react-native-anchor-carousel
> a simple swipeable carousel which anchor two sides
Latest version **4.0.1** (published 2021-07-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-anchor-carousel
pnpm add react-native-anchor-carousel
yarn add react-native-anchor-carousel
bun add react-native-anchor-carousel
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.1 |
| Published | 2021-07-11 |
| First published | 2019-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 121 |
| Author | Le Hoang Nam |
| Maintainers | lehoangnam97 |
| Keywords | anchor, react, native, swipeable, carousel, horizontal, edge, side, snap, slider, component, ios, android |
## Links
- npm: https://www.npmjs.com/package/react-native-anchor-carousel
- Repository: https://github.com/lehoangnam97/react-native-anchor-carousel
- Homepage: https://github.com/lehoangnam97/react-native-anchor-carousel#readme
- Issues: https://github.com/lehoangnam97/react-native-anchor-carousel/issues
- npm.io page: https://npm.io/package/react-native-anchor-carousel
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 4.0.1 (latest) — 2021-07-11
- 4.0.0 — 2021-07-11
- 3.1.2 — 2020-02-27
- 3.1.1 — 2019-08-29
- 3.1.0 — 2019-08-28
- 3.0.1 — 2019-08-25
- 3.0.0 — 2019-08-25
- 2.3.1 — 2019-08-25
- 2.3.0 — 2019-08-25
- 2.2.0 — 2019-06-25
- 2.1.2 — 2019-06-17
- 2.1.1 — 2019-06-17
- 2.1.0 — 2019-06-17
- 2.0.0 — 2019-06-17
- 1.0.4 — 2019-05-29
- … 4 more at https://npm.io/package/react-native-anchor-carousel/versions
## 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 react-native-anchor-carousel@3.1.2
```
```sh
$ yarn add react-native-anchor-carousel@3.1.2
```
### 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!**
---
_Source: https://npm.io/package/react-native-anchor-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._