Socket
Socket
Sign inDemoInstall

react-native-animated-scroll-indicators

Package Overview
Dependencies
5
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-animated-scroll-indicators

Animated Scoll Indicator component fro react-native powered by Animated-api.


Version published
Maintainers
1
Weekly downloads
40
decreased by-45.21%

Weekly downloads

Readme

Source

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

PropDefaultTypeDescription
scrollWidth-NumberThis is the width of pagination of scrollview.
numberOfCards-NumberThis number decides the number of dots which should be equivalent to the number of pages in the scrollview.
scrollAnimatedValue-Animated.ValueThis animated value is the derived from onScroll event from scrollview
activeColor'#8F9499'StringColor of the dot indicator when it is active.
inActiveColor'#fff'StringColor 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>
    );
  }
  ...

Keywords

FAQs

Last updated on 20 Jan 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc