Layout Animations is not working as expected

[im-alihashmi14]

Description

When I add Animated.View and apply layout={Layout.springify()}. Animation works perfectly but when I go back and navigate back to this screen this layout animation donot work. https://drive.google.com/file/d/1UGQlT9lgY_EtRSrbMMFX7dcXOcCoNW6h/view?usp=sharing

Kindly see the above video

Steps to reproduce

Just Add Animated.View and go back and then navigate again to that screen

Snack or a link to a repository

nan

Reanimated version

3.3.0

React Native version

0.71.11

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

iPhone 14 pro max

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[joeporpeglia]

Possibly related to #4816. @im-alihashmi14 I can't tell what your navigator setup is, but can you see if the workaround listed in the other issue fixes this?

[im-alihashmi14]

Hi @joeporpeglia. thank you so much for your response. Yes I tried your work around and its working perfectly but now this issue is happening when I am going forward from current screen and then returning back.

You can look at video below

https://github.com/software-mansion/react-native-reanimated/assets/59221555/c2498b7d-5caa-4d1e-863f-1f08d7478a1e

For the Navigator setup, I have bottom tab navigator and I tried to navigate from Bottom Tab to Native Stack Navigator that's where animation stops working. Now by applying your workaround, my animation is working when coming from Tab to Native Screen. But when I go from Native Screen to other Native Screen and then coming back, that's when animation stops working.

[joeporpeglia]

Any chance you're using freezeOnBlur with that stack navigator? I'm not sure what's actually going on here, but it seems like the "detached screen" behavior is conflicting with reanimated v3 layout transitions

Edit: I just verified the same issue with a stack navigator we have nested in our tab navigator. Not sure of a workaround for the stack navigator at the moment.

[Latropos]

Duplicate of #4816

[Latropos]

It seems that only IOS is affected

[grifotv]

I'm experiencing the same issue since upgrading Reanimated from 2.14.4 to 3.3.0.

[badalsaibo]

Creating a simple Switch component and the layout animation won't work on the iOS emulator. On Android it works perfectly.

type SwitchProps = {
  value: boolean;
  toggleSwitch: () => void;
};

const Switch = ({ value, toggleSwitch }: SwitchProps) => {
  return (
    <Pressable onPress={toggleSwitch} hitSlop={10}>
      <View
        className="relative bg-app-grey-100 rounded-full flex-row items-center"
        style={{ height: 26, width: 40 }}>
        <Animated.View
          className="absolute bg-white rounded-full"
          layout={SequencedTransition}
          style={[
            {
              width: 22,
              height: 22,
              ...(value
                ? { right: 2, backgroundColor: colors['app-purple-900'] }
                : { left: 2 }),
            },
          ]}
        />
      </View>
    </Pressable>
  );
};

[Latropos]

It seems that we forgot to close this issue after merging this fix: https://github.com/software-mansion/react-native-reanimated/pull/4997