React Native Sync ScrollView

Component for React Native which allows to synchronize scroll of multiple ScrollViews which can have different length. When you scroll one of inner ScrollViews, then others will scroll on same percentage position so scroll speed will be different, depends on their size.

Small component built using Typescript and React Hooks, so need react-native 0.59+.

Examples in examples folder and on Expo https://expo.io/@eugnis/projects/react-native-sync-scrollview-example

Expo snack with preview here: https://snack.expo.io/@eugnis/react-native-sync-scrollview

Installation

npm i react-native-sync-scrollview --save

or

yarn add react-native-sync-scrollview

Basic Usage

To create horizontal Synchronized ScrollViews with 3 rows and with 20 +- 10 custom components each.

// Create Array of Arrays with items (range function from lodash)
const rowItems: JSX.Element[][] = range(3).map((rowI) =>
  range(Math.random() * 20 + 10).map((index) => (
    <View key={`row${rowI}-${index}`}>
      <Text>Test</Text>
    </View>
  ))
);
// Styles for View container for ScrollViews
const styles = StyleSheet.create({
  scrollSync: {
    height: 150,
    margin: 10,
    padding: 2,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "gray",
  },
});

// use ScrollSync component in render
<ScrollSync rowItems={rowItems} containerStyle={styles.scrollSync} />;

Configuration

| Property | Type | Default | Description | | ---------------- | -------------------------- | ------------ | --------------------------------------------------------- | | rowItems | JSX.Element[][] | - | Array of arrays with your custom JSX.Element components | | containerStyle | style object | undefined | Style for View container which holds inner ScrollViews | | scrollViewsStyle | style object | undefined | Style for inner ScrollViews | | type | horizontal or vertical | horizontal | Choose Horizontal or Vertical type, default is Horizontal |