I'm using React Native Animations in my Vue Native app. They normally work fine, but for some reason when I try to animate paddingTop and paddingBottom, the values skip to their end value rather than animating smoothly through them.
This seems to only happen if there are a lot of views (15+) on the screen. Note, not all of these views are animating, just the one! Also note that animating the opacity of these views DOES work fine, just the padding animation is skipping.
I can't use useNativeDriver because paddingTop/Bottom aren't supported, and easing functions don't seem to help. If I crank the duration time, then the animations will be more normal on the ones skipping, but obviously extremely slow on the ones not.
Is this just a limitation of React Native/Vue Native?
A snippet (note opacityGrowth isn't being animated at the same time as paddingMod):
<animated:view
:style="{opacity: opacityGrowth,
paddingTop: paddingMod,
paddingBottom: paddingMod }">
widenLetter () {
var time = 300
// Animate the letter as we read it, making it inflate
Animated.timing(this.paddingMod, {
toValue: 20,
duration: time,
}).start()
},
shrinkLetter () {
var time = 300
// Animate the letter after we read it, making it deflate
Animated.timing(this.paddingMod, {
toValue: 0,
duration: time,
}).start()
},