Skip to content

Smooth Animation

Tam edited this page Mar 3, 2017 · 3 revisions

Whenever you use an Animated.event, set the second argument to { useNativeDriver: true }. This will tell react to use native animations, instead of JS ones. This will make your animations smoooooooth.

Animated.event(
	[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
	{ useNativeDriver: true }
);

One caveat is that certain style properties can't be animated natively (i.e. width, height). See this whitelist for what you can animate.

See Linking Animations to Scroll Position in React Native for more.

Clone this wiki locally