react-native-animated-scroll-indicators

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 (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          <Animated.ScrollView
            horizontal
            pagingEnabled
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{ flexGrow: 1 }}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { x: this.scrollX } } }],
              { useNativeDriver: true })}
          >
            <View style={{ flex: 1, backgroundColor: 'white', width }} />
            <View style={{ flex: 1, backgroundColor: 'gray', width }} />
            <View style={{ flex: 1, backgroundColor: 'white', width }} />
            <View style={{ flex: 1, backgroundColor: 'gray', width }} />
            <View style={{ flex: 1, backgroundColor: 'white', width }} />
            <View style={{ flex: 1, backgroundColor: 'gray', width }} />
            <View style={{ flex: 1, backgroundColor: 'white', width }} />
          </Animated.ScrollView>
          <View style={{
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 100,
            marginBottom: 20,
            position: 'absolute'
          }}>
            <RNAnimatedScrollIndicators
              numberOfCards={7}
              scrollWidth={width}
              activeColor={'black'}
              inActiveColor={'pink'}
              scrollAnimatedValue={this.scrollX}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
  ...