@fanchenbao/react-native-scroll-indicator

A react-native component that offers a customizable scroll indicator for ScrollView and FlatList

Disclaimer

The idea of animating a scroll indicator in response to the scrolling on a scrollable component is borrowed from Lord Pooria's SO answer.

Why do we need another customizable scroll indicator?

If you search for react native scroll indicator on npm, there are more than 10 packages already there. Compared to those, this package has the following advantages:

• Supports:
  • Both ScrollView and FlatList
  • Both vertical and horizontal scrolling
  • Indicator shrinking in iOS when user scrolls beyond the edge
  • inverted={true} in FlatList
  • Indicator customization just like a regular View (e.g. color, width, position, etc.)
  • Draggable indicator (added in v0.3.0)
• Detailed documentation with comprehensive examples
• The animation logic of the indicator is well documented in the source code.

Installation

npm install @fanchenbao/react-native-scroll-indicator

Usage

ScrollViewIndicator

import * as React from 'react';
import {View, Text} from 'react-native';
import {ScrollViewIndicator} from '@fanchenbao/react-native-scroll-indicator';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <View style={{height: '30%', width: '80%'}}>
        <ScrollViewIndicator
          indStyle={{backgroundColor: 'green'}}
          containerStyle={{
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <View>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              rhoncus nisl egestas, auctor mi pulvinar, aliquam metus. Nunc
              porttitor quam molestie tempor laoreet. Sed vitae ex vitae turpis
              convallis accumsan. Fusce consequat quis nisi sed lacinia. Nullam
              quis condimentum tellus. Donec ornare quam sit amet tempor
              imperdiet. Proin condimentum leo quis ipsum pretium ornare
              facilisis eget nunc. Pellentesque orci purus, pellentesque et nisl
              at, varius molestie nisi. Vestibulum ante ipsum primis in faucibus
              orci luctus et ultrices posuere cubilia curae; Nam ante nulla,
              sagittis vitae ante id, dignissim vestibulum ligula. Mauris
              iaculis nisi sed sapien finibus, sed pharetra risus rutrum. Cras
              laoreet mattis egestas. Pellentesque feugiat accumsan ultricies.
              Nullam viverra sapien nec tellus commodo aliquet. Integer faucibus
              quam sed nibh congue, at cursus risus vulputate. Morbi commodo
              mollis tempus.
            </Text>
          </View>
        </ScrollViewIndicator>
      </View>
    </View>
  );
};

export default App;

FlatListIndicator

import * as React from 'react';
import {View, Text} from 'react-native';
import {FlatListIndicator} from '@fanchenbao/react-native-scroll-indicator';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <View
        style={{
          height: '10%',
          width: '80%',
        }}
      >
        <FlatListIndicator
          flatListProps={{
            ItemSeparatorComponent: () => (
              <View style={{width: 1, backgroundColor: 'blue'}} />
            ),
            data: [
              'Druid',
              'Sorceress',
              'Paladin',
              'Barbarian',
              'Necromancer',
              'Assassin',
              'Amazon',
            ],
            renderItem: ({item}) => (
              <View style={{justifyContent: 'center', padding: 10}}>
                <Text>{item}</Text>
              </View>
            ),
          }}
          horizontal={true}
          position="bottom"
          indStyle={{width: 30}}
          containerStyle={{borderWidth: 1, borderColor: 'black'}}
        />
      </View>
    </View>
  );
};

export default App;

Comprehensive Examples

Try it on Snack Expo

The comprehensive example takes advantage of the scroll indicator's customizability. A brief summary of the corresponding props for each option is given below. For details, refer to the Props table.

• Horizontal: horizontal={true}
• Vertical: horizontal={false}
• left: position="left"
• right: position="right"
• top: position="top"
• bottom: position="bottom"
• 20: position={20}
• 50: position={50}
• 80: position={80}
• Normal: indStyle={backgroundColor: 'grey', width: 5}
• Crazy: indStyle={backgroundColor: 'red', width: 40}

Run Comprehensive Examples

Download this repo

git clone https://github.com/FanchenBao/react-native-scroll-indicator.git

Go to the example folder and sets up the example app

npm install

While inside the example folder, run the app for iOS

npm run ios

or Android

npm run android

The example app is running from ./example/App.tsx

Props

Limitations

The package is designed to be a substitute of ScrollView and FlatList under the most basic usage. Thus, despite allowing any props from ScrollView and FlatList to be passed to ScrollViewIndicator and FlatListIndicator, the package has NOT been fully tested on the combination of all the props. It is very likely that some prop combinations would break the custom scroll indicator. If that happens, please raise an issue or suggest a feature request on GitHub.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library