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?