Animation After State Change in React Native

Question

I have a Card i'm Animating with react-native-reanimated

the problem is that when the state changes the animation won't works

is there any way to run this animation on state change?

Code

      import Animated, {
       SlideInRight,
       Layout,
       SlideInLeft,
      } from 'react-native-reanimated';   

            <Animated.View
              style={styles.manage_series}
              entering={SlideInRight.duration(200)}
              exiting={SlideInLeft.duration(200)}
              layout={Layout.springify()}>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                <Animated.Text style={styles.manage_text}>
                  {title5}
                </Animated.Text>
                {title5 == 'Manage Matches' ? (
                  <TouchableOpacity
                    style={styles.select}
                    onPress={() => navigation.navigate('Schedule')}>
                    <Text style={styles.select_text}>Select Series</Text>
                    {List_Arrow}
                  </TouchableOpacity>
                ) : (
                  <></>
                )}
              </View>
              <View style={{marginTop: 20}}>{title5_content}</View>
            </Animated.View>

Answer 1

Try use useEffect. Place your state in the dependency and call the function with animation to change it