CODEWITHSUNDEEP
javascriptandroidreact-native
Zach
Zach

Reputation: 880

React Native Android FlatList onScroll Animation

I have a FlatList with an onScroll function that looks like this:

<Animated.View style={{ transform: [{translateX: this.state.scrollX}] }}>
  <FlatList
    data={ reactionGroup.reactions }
    keyExtractor={ (i) => i.id + uuid.v4() }
    renderItem={ this._renderItem }
    horizontal={ true }
    scrollEventThrottle={1}
    onScroll={ reactionGroup.reactions.length > 1 ? this.onScroll : null }
    showsHorizontalScrollIndicator={ false } />
</Animated.View>

onScroll(event) {
  const { timing } = Animated
  if (event.nativeEvent.contentOffset.x > 0) {
    timing(
      this.state.scrollX,
      { toValue: -60, duration: 100, useNativeDriver: true }
    ).start()
  } else {
    timing(
      this.state.scrollX,
      { toValue: 0, duration: 100, useNativeDriver: true }
    ).start()
  }
},

This works great on iOS, but for Android the animation won't start until the FlatList has stopped scrolling.

I'm basically just kicking off an animation when the user scrolls and setting it back when they go back to the beginning of the horizontal scroll.

Is there a better way to handle this so it works on Android?

I also tried doing Animation.event inside onScroll, but I don't want to tie the animation directly to the scroll position. This approach allowed Android to animate while scrolling, but it was pretty jittery.

RN: 0.43.3

Upvotes: 8

Views: 15152

Answers (1)

jhm
jhm

Reputation: 4539

You should use the Animated.event approach. As seen in the example in the docs, it maps the event.nativeEvent for you.

Here's a blogpost with an example of how to animate the nav header on scroll by a RN contributor:

https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

Hope it helps :-)

Upvotes: 2

Related Questions