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

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 28468

Trending Articles



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