Animated.View does not update exiting/entering layout animations dynamically

[Julioevm]

Description

I'm encountering the same issue that was described on #3662 I it supposedly fixed by #5371 but Im testing this on reanimated 3.8.1 and I am encountering the same issue.

If I update the entering / exiting value of an Animated.view, the old one will play instead of the new one. Only in a freshly created element will the new effect show up.

I also tried the workaround that was used in the issue, creating a custom animation but the result is the same.

Steps to reproduce

1. Set the exiting property on a Animated.view component.
2. Update its value, which is calculated from a sharedValue.
3. Trigger a re-render.
4. The old animation still plays on the exiting event of the element.

Snack or a link to a repository

https://snack.expo.dev/@julioevm/reanimated-changing-entering-and-exiting

Reanimated version

3.8.1

React Native version

0.73

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[hanwenbo]

+1

[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,
  },
});

[Julioevm]

Thanks a lot @exploIF!