Animated Scoll Indicator component fro react-native powered by Animated-api.
npm install react-native-animated-scroll-indicators
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}
/>
);
}
...
``