Animation is not showing with Animated.Value-CodePudding

I have these lines of code

...
setShowSpinner(true)
if (toggled) {
    // set fromValue and toValue
    console.log('fromValue', fromValue)
    //  fromValue 305
    console.log('toValue', toValue)
    // toValue 509.3
    Animated.timing(new Animated.Value(fromValue), {
        toValue: toValue,
        useNativeDriver: false,
        easing: Easing.exp
    }).start(() => setShowSpinner(false));
} else {
    // set fromValue and toValue
    console.log('fromValue', fromValue)
    //  fromValue 509.3
    console.log('toValue', toValue)
    // toValue 305
    Animated.timing(new Animated.Value(fromValue), {
        toValue: toValue,
        useNativeDriver: false,
        easing: Easing.exp
    }).start(() => setShowSpinner(false));
}

The spinner is showing/disappearing, meaning, the animation gets started and stopped properly. However, I cannot see the animation. The height of the <View /> does not change...

Any hints why that might be?

CodePudding user response：

You haven't shown where you're setting the height of the View, but it doesn't look like it's possible for the values you're animating to be used anywhere else, since you're creating them inside the start callback. They have to be initialized outside the callback and used in the animated component's styles.

Your fromValue constants must also be Animated.Values instead of numbers.

Try instead something like this (based on the example in the docs):

const heightAnim = useRef(new Animated.Value(305)).current;
...
    // in your if/else block
    Animated.timing(heightAnim, {
        toValue: toValue,
        useNativeDriver: false,
        easing: Easing.exp
    }).start(() => setShowSpinner(false));
...
// in your function return
  <Animated.View style={{ height: heightAnim }}>
    ...