React-Native animations has some limitations on what can be done using the native driver and what
only animate using the JS interpreter, which is super slow and will probably affect your
performance. If you try and hang a few
interpolates in that
Animated.Value, you’ll have a bad
time trying to have fluid and seemless animations.
If only there was a way of using one
Animated.Value to drive another
💡 What if you use a native animation’s listener to drive a non-native animation?
Yes, that’s possible. No, using a listener doesn’t automatically make your animation non-native.
This means you’ll need multiple
Animated.Values (if that wasn’t clear yet):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
Let’s recap what’s up there:
- We defined
jsAnim, which are
- This value is driven by a native
Animated.eventtriggered by a ScrollView’s offset.
- We added a listener to
nativeAnimto drive a second
Animated.Value, by using a non-native
- The non-native animation (
jsAnim) is then used to animate a
backgroundColor, which is a style property that can only be animated by non-native animations.
That truly works, check it out: