Animated.View does not update exiting/entering layout animations dynamically about react-native-reanimated

[exploIF]

@Julioevm Hi there, it looks to me like your CustomExitingAnimation is not working because your shared value never gets updated (it's using initial value all the time, so value from the very first render). Also there is no need to store animation directions inside state, you can store it directly as a shared value, pass it to the children component and then use useDerivedValue in order to access it.

I've modified your example to achieve proper exiting animation. Please check below

import { Text, StyleSheet, View, SafeAreaView, Button } from 'react-native';

import React, { useState } from 'react';

import Animated, {
  SlideOutRight,
  SlideOutLeft,
  useSharedValue,
  useDerivedValue,
  ExitAnimationsValues,
  SharedValue,
} from 'react-native-reanimated';

const slideOutLeftAnimation = new SlideOutLeft().build();
const slideOutRightAnimation = new SlideOutRight().build();

function Card({ animation }: { animation: Readonly<SharedValue> }) {
  const animationDirection = useDerivedValue(() => animation.value);

  const CustomExitingAnimation = (values: ExitAnimationsValues) => {
    'worklet';

    return animationDirection.value === 'right'
      ? slideOutLeftAnimation(values)
      : slideOutRightAnimation(values);
  };

  return (
    <Animated.View exiting={CustomExitingAnimation}>
      <View style={styles.cardContainer}>
        <Text style={styles.paragraph}>Let's go</Text>
      </View>
    </Animated.View>
  );
}

export default function App() {
  const [number, setNumber] = useState(0);

  const animation = useSharedValue('right');

  const nextButton = () => {
    animation.value = 'right';
    setNumber((n) => n + 1);
  };
  const prevButton = () => {
    animation.value = 'left';
    setNumber((n) => n - 1);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Card key={number} animation={animation} />
      <View style={styles.buttonWrapper}>
        <Button onPress={prevButton} title={'prev'} />
        <Button onPress={nextButton} title={'next'} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  buttonWrapper: {
    flexDirection: 'row',
  },
  cardContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: 'aquamarine',
    margin: 20,
  },
});

[hanwenbo]

+1

[Julioevm]

Thanks a lot @exploIF!