react-native-sync-scrollview v0.0.4

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