react-native-animated-scroll-indicators

A package to display instagram-like animated scroll indicators on iOS as well as android.
Works with Animated.Scrollview and Animated.Flatlist.


Installation

Using npm:
``
npm install --save react-native-animated-scroll-indicators
`
or using yarn:
`
yarn add react-native-animated-scroll-indicators
`

Basic

| Prop | Default | Type | Description |
| :------------- | :-------------: | :------: | :---------------------------------------------------------------------------------------------------------- |
| scrollWidth | - | Number | This is the width of pagination of scrollview. |
| numberOfCards | - | Number | This number decides the number of dots which should be equivalent to the number of pages in the scrollview. |
| scrollAnimatedValue | - | Animated.Value | This animated value is the derived from onScroll event from scrollview|
| activeColor | '#8F9499' | String | Color of the dot indicator when it is active. |
| inActiveColor | '#fff' | String | Color of the dot indicator when it is inactive. |

Usage

`
import RNAnimatedScrollIndicators from 'react-native-animated-scroll-indicators';

...
scrollX = new Animated.Value(0);

render() {
return (


horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ flexGrow: 1 }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { x: this.scrollX } } }],
{ useNativeDriver: true })}
>








left: 0,
right: 0,
bottom: 0,
zIndex: 100,
marginBottom: 20,
position: 'absolute'
}}>
numberOfCards={7}
scrollWidth={width}
activeColor={'black'}
inActiveColor={'pink'}
scrollAnimatedValue={this.scrollX}
/>



);
}
...
``