react-native-reanimated: Layout "exiting" animation not working on first execution on iOS

Description

After upgrading to reanimated > rc-7, on iOS the first time we perform an exiting animation, it is not executed.

iOS: (the first fadeout is immediate) https://github.com/software-mansion/react-native-reanimated/assets/93535783/e3377e9e-3f3d-4504-8b4f-49899e67323a

Android: https://github.com/software-mansion/react-native-reanimated/assets/93535783/10082791-2d99-4501-89ab-6c6bc6c61505

Code:

const Component: FC = () => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <View style={{ flex: 1, marginTop: 200 }}>
      <Button
        text='ciao'
        onPress={() => {
          setIsLoading(!isLoading);
        }}
      />
      {isLoading ? (
        <AnimatedWrapper exiting={FadeOut.duration(2000)}>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
          <Text>ciao</Text>
        </AnimatedWrapper>
      ) : null}
    </View>
  );
};

Steps to reproduce

I did my best to create a reproducible but everything works fine in a demo project.

On the incriminated project, I see that on iOS the FadeOut worklet is not called when we press the button to hide the list for the first time.

Steps:

Pressing the button “ciao” should FadeOut the list of “ciao”
Pressing the button “ciao” a second time should bring the list back visible
etc…

I understand that could be nice to have reproducible but unfortunately, I couldn’t reproduce on a new project. I’m looking for clues to understand what kind of dependency is breaking things.

I tried upgrading the react-navigation libraries but without any success.

I tried to build the same component on the same app but on the StoryBook and the problem is not visible.

I appreciate any hint or any suggestion on further analysis that I can do.

Snack or a link to a repository

“”

Reanimated version

3.1.0

React Native version

0.70.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

About this issue

Original URL
State: open
Created a year ago
Reactions: 11
Comments: 30 (2 by maintainers)

Most upvoted comments

Adding z-index on style of Animated.View resolved issue for me.

 <Animated.View
        key={"uniqueKey"}
        entering={FadeIn.duration(500)}
        exiting={SlideOutLeft}
        style={{
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          zIndex: 9999,
        }}
 >

+23

egingir on Feb 27, 2024

Any updates on this issue?

+19

jvfalco1 on Jul 11, 2023

I also have the same problem. Exiting animation doesn’t work on iOS but it works on Android.

+12

skoob13 on Aug 22, 2023

Same issue.

Rag0n on Feb 15, 2024

Any updates on this?

animaonline on Feb 12, 2024

Experiencing the same problem here. Entering works on first render, subsequent remounts of component does not show exit animation nor new enter animation when it returns.

sannajammeh on Aug 8, 2023

Still the same issue, my custom exiting animation works on Android, not ios. My entire app is wrapped in SafeAreaView import from react-native and createNativeStackNavigator

Adding Z index did not fix it for me either.

Also, the exiting animation only doesn’t work on the initial run, but I need it to work on the initial render

johntheZ on Mar 26, 2024

same issue

angelo-hub on Feb 20, 2024

I am experiencing the same issue.

ibovegar on Nov 23, 2023

Adding z-index on style of Animated.View resolved issue for me.

 <Animated.View
        key={"uniqueKey"}
        entering={FadeIn.duration(500)}
        exiting={SlideOutLeft}
        style={{
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
          zIndex: 9999,
        }}
 >

Confirmed just now it works.

mikgross on Apr 21, 2024

Oh! And the original post is not on Expo.

I should probably open another issue then. Even though there are similarities, it’s probably a different problem. Can you put back the labels “missing repro”?

Thanks. Sorry about the confusion.

pierpo on Oct 26, 2023

a temp workaround that might not work for all cases

i’m on 3.5.1 btw

lightrow on Sep 15, 2023

just upgraded from 2.14 to 3.3.0 - got the same issue, layout exiting animation doesn’t work, the animated view disappears instantly on unmount. I don’t use SafeAreaContext, but i use native stack navigator from react-navigation. If i replace all createNativeStackNavigator with createStackNavigator - the issue goes away, but it’s not an acceptable workaround

const Screen = ({ route }) => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setIsLoading(false);
        }, 2000);
    }, []);

    return (
        <View>
            <Button onPress={Navigation.goBack} title="back" style={{ marginTop: 100 }} />

            {isLoading ? (
                <Animated.View
                    exiting={FadeOutDown}
                    style={{
                        zIndex: 9999, // zIndex seems to be required here, otherwise the green view overlaps the red one instantly
                        backgroundColor: 'red',
                        height: '100%',
                        width: '100%',
                    }}
                />
            ) : (
                <View
                    style={{
                        backgroundColor: 'green',
                        height: '100%',
                        width: '100%',
                    }}
                />
            )}
        </View>
    );
};

lightrow on Jun 24, 2023