Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Scroll multiple horizontal scrollview in sync when you scroll one in React Native

$
0
0

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?


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>