react native - dynamic reanimated2 entering and exiting animation

Question

I am using reanimated2 for my react native project. I want to dynamically change the animation to ZoomInLeft or ZoomInRight based on the situation:

export default function SigninCard(props){
    const [zoomout,setZoomout] = useState('left')

    function handleExiting(s){
        console.log(s)
        setZoomout(s)
    }

    <Animated.View 
        style={{flex:1, alignItems:'center'}}
        entering={ZoomInRight}
        exiting={zoomout=='left' ? ZoomOutLeft : ZoomOutRight}
        ...
        <Button title='Register' onPress={()=>{
            handleExiting('left');
            parentgoto('userdetails';
        )}}
    />
        <Button title='Login' onPress={()=>{
                handleExiting('right');
                parentgoto('userdetails';
            )}}
        />
    </Animated.View>
}

Like to code above, I use zoomout variable to decide if I want the animation to go right or left, then set ternary condition in exiting. But somehow the animation will always go left. even I click on the right button.

After a few tests, I believe the decision factor is at the useState('left'). even though I setZoomOut('right'), it don't seems to change the state.

How can I resolve this? Or is there another way to achieve this?

Answer 1

the <Animated.View /> seems to be the default one, so I assume that exiting={zoomout=='left' ? ZoomOutLeft : ZoomOutRight} is not being triggered since it's not a predefined property of the native <View /> element.

What you could do is use an useEffect() hook in which you check the state and apply the animation. Below you can find an example:

export default function SigninCard(props){
  const [zoomout,setZoomout] = useState(null);

  useEffect(() => {
    switch(zoomout) {
      case 'left':
      ZoomOutLeft();
      break;

      case 'right':
      ZoomOutRight();
      break;

      default:
      break;
    }
  }, [zoomout]);

  return (<Animated.View 
      style={{flex:1, alignItems:'center'}}>
      <Button title='Register' onPress={()=>{
        setZoomout('left');
        parentgoto('userdetails');
      )}}
    
      <Button title='Login' onPress={()=>{
         setZoomout('right')
         parentgoto('userdetails');
      )}}
    />
  </Animated.View>);
}

I also assume that entering={ZoomInRight} won't work either, to fix it you can apply the same logic as shown above.