Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30346

React Native Animation skipping to end value

$
0
0

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()
        },

Viewing all articles
Browse latest Browse all 30346

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>