Below is a sample of what needs to be achieved in React Native:
Title1
Some description that spans horizontally using a ScrollView (horizontal prop)...............................
Title2
Some description that spans horizontally using a ScrollView (horizontal prop)...............................
Title3
Some description that spans horizontally using a ScrollView (horizontal prop)...............................
The code for the same is:
FlatList --> View --> Title + ScrollView (description)
Now, the expectation is when I scroll the description of one row, all the descriptions from the other row should scroll in sync.
Below is the structure:
<View>
<TouchableOpacity>
<View style={styles.titleContainer}>
<Text style={styles.title}>{name}</Text>
</View>
</TouchableOpacity>
<ScrollView
onMomentumScrollEnd={e => this.onScroll(e, index)}
ref={node => { this.scrollRef[index] = node; }}
scrollEventThrottle={16}
showsHorizontalScrollIndicator={false}
horizontal
style={styles.fundContainer}
>
<View style={styles.statsContainer}>
<Text>Some Description</Text>
</View>
</ScrollView>
</View>
And the method that I run on scroll:
onScroll = (event: Object, index: number) => {
this.scrollRef.forEach((scrollItem, scrollIndex) => {
if (scrollIndex !== index) {
scrollItem.scrollTo({
x: event.nativeEvent.contentOffset.x,
y: event.nativeEvent.contentOffset.y,
animated: true,
});
}
});
};
I am using onMomentumScrollEnd
which scrolls the item on scroll end. If I use onScroll
, it creates a performance bottleneck and lags miserably.
Are there any workaround to scroll the list in sync?