How to animate multiple component opacity with react native reanimated 2?

Question

I am learning react native reanimated.

I am trying to make multiple component visible at the same time when user press a button. But when ever I press the button only the last component become visible. I am using react native reanimated2

Here is the code

const Baby = () => {
const signUpOpacity = useSharedValue(0.1);

const signUpTextStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(signUpOpacity.value, {
        duration: 300,
      }),
    };
  });

return(
<View>
 <TouchableOpacity onPress={() => (signUpOpacity.value = 1)}>
      <Text style={styles.welcomeText}>Welcome</Text>
    </TouchableOpacity>

 <Animated.View
      style={[{
        width: 50,
        height: 50,
        backgroundColor: 'red',
        marginTop: 20,
      }, signUpTextStyle]}></Animated.View>
    <Animated.View
      style={[{
        width: 50,
        height: 50,
        backgroundColor: 'red',
        marginTop: 20,
      }, signUpTextStyle]}></Animated.View>
  </View>
)
}

Here is what happening

score 0 · Answer 1 · answered Sep 09 '21 at 13:06

Try this:

<Animated.View style={signUpTextStyle}>
     <View style={{
         width: 50,
         height: 50,
         backgroundColor: 'red',
         marginTop: 20,
         }} />
     <View style={{
         width: 50,
         height: 50,
         backgroundColor: 'red',
         marginTop: 20,
         }}/>
</Animated.View>

How to animate multiple component opacity with react native reanimated 2?

1 Answers1