search

halilb / react-native-textinput-effects

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
MIT License
2.99k stars 293 forks source link

improve the animation by using Native Driver #28

Closed jjhesk closed 7 years ago

jjhesk commented 7 years ago

According to the newly release blog, we should be using the useNativeDriver: true from the code.

http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html

example:

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // <-- Add this
  )}
>
  {content}
</Animated.ScrollView>
halilb commented 7 years ago

Thanks for the suggestion @jjhesk.

I actually tried this but it appears useNativeDriver supports only transform, opacity and backgroundColor animations. We can't benefit from it because we rely on width, height and position animations.

Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like transform, opacity and backgroundColor will work but flexbox and position properties won't.

I'm closing this one but I'll keep following nativeDriver updates and apply them to the library whenever it's possible.