CODEWITHSUNDEEP
react-native
FLash
FLash

Reputation: 746

React-Native Parallel animation for parent and child components

I have a parallel animation as follows. 

Animated.parallel(
[
    Animated.timing(this.translateAnimatedValue, {
        toValue: 100,
        duration: 500,
        useNativeDriver: Platform.OS == 'android'
    }),
    Animated.timing(this.opacityAnimatedValue, {
        toValue: 1,
        duration: 500,
        useNativeDriver: Platform.OS == 'android'
    })
])
.start();

It works for my component.

return (
    <Animated.View style={{ opacity: this.opacityAnimatedValue, transform: [{ translateY: this.translateAnimatedValue }] }}>
        <View>
            {children}
        </View>
    </Animated.View>
);

But I do not want the parent component to disappear. Only need to hide the children. So, when I change the code to the following, the app crashes.

return (
    <Animated.View style={{ transform: [{ translateY: this.translateAnimatedValue }] }}>
        <View style={{ opacity: this.opacityAnimatedValue }}>
            {children}
        </View>
    </Animated.View>
);

I also separated the animations and tried. But, it also crashes the app

Animated.timing(this.translateAnimatedValue, {
    toValue: 100,
    duration: 500,
    useNativeDriver: Platform.OS == 'android'
}).start();

Animated.timing(this.opacityAnimatedValue, {
    toValue: 1,
    duration: 500,
    useNativeDriver: Platform.OS == 'android'
}).start();

I want the container to translate and the text to appear/disappear. How to achieve this behavior?

Upvotes: 3

Views: 1642

Answers (1)

user9408899
user9408899

Reputation: 4540

You forgot to add Animated. prefix to your View.

Replace this:

 <View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </View>

with this:

 <Animated.View style={{ opacity: this.opacityAnimatedValue }}>
     {children}
 </Animated.View>

Upvotes: 1

Related Questions