Animated.View causes layout shift on Android after screen navigation and re-render

[faciledictu]

Description

Using react-native-reanimated and react-native-screens in a React Native 0.78.1+ app on Android, I’m seeing unexpected layout changes when navigating between screens.

After navigating forward from the screen containing Animated.View and re-rendering causes the second screen to shrink slightly. Navigating forward and back to the second screen causes it to grow slightly.

It’s not cumulative scaling — it flips between normal and distorted sizes based on navigation + re-render cycles.

enableScreens(false) does not fix it Changing animated property (opacity, transform, etc.) does not fix it Using StackNavigator fixes it Removing Animated.View fixes it

• React Native: 0.79.0 (also reproduced on 0.78.1)
• Reanimated: 3.17.3
• @react-navigation/native: 7.1.6
• @react-navigation/native-stack: 7.3.10
• Platform: Android only (tested on emulator with SDK 35 and on real device with Android 14, both release and debug mode)

Steps to reproduce

1. Render an Animated.View with a static shared value
2. Navigate from this screen to another.
3. On the second screen, trigger a re-render. Screen shrinks a bit.
4. Go next, trigger re-render once. Same behaviour.
5. Go back. The screen is now larger than it should be.
6. Trigger re-render again. Screen returns to normal size.
7. Repeat steps 4–6 to see the pattern continue.

Snack or a link to a repository

https://github.com/faciledictu/ReanimatedAndNativeStackIssue

Screens version

4.10.0

React Native version

0.79.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

Android 15, Android 14

Acknowledgements

Yes

[faciledictu]

https://github.com/user-attachments/assets/80618c85-f6ed-4893-b8c6-14557e478179

[prachipatel01]

Hey, I ran into the same layout shift issue when using Animated.View (with react-native-reanimated) inside a screen managed by react-native-screens on Android. After trying several things, the only workaround that temporarily resolved the issue for me was to delay the rendering of the animated view until the screen is fully focused.

Here's the workaround:

const First = ({navigation}: NativeStackScreenProps<StackParamList>) => {
  const animatedValue = useSharedValue(0);

  const isFocused = useIsFocused();

  useEffect(() => {
    if(isFocused) {
      animatedValue.value = withTiming(1, { duration: 0 });
    }
  }, [isFocused]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: animatedValue.value }],
  }));

  return (
    <View style={styles.container}>
     {isFocused && <Animated.View
        style={[
          styles.animatedContainer,
          animatedStyle,
        ]}
        >
        <Text>Animated.View</Text>
      </Animated.View>}
      <Button
        title="Go Next"
        onPress={() => {
          navigation.navigate('Second');
        }}
      />
    </View>
  );
};

This ensures the Animated.View is only rendered after the screen is fully in focus, which seems to avoid layout glitches caused by Reanimated applying transforms too early during the screen transition.

If anyone finds a more robust solution or is working on a proper patch in react-native-screens or reanimated, please do share it here, it would be really helpful. Thanks!

[faciledictu]

@prachipatel01 the issue doesn't occur when using the standard React Native Animated API instead of Reanimated

[maciekstosio]

Hi @faciledictu! It seems the problem is caused by this issue: https://github.com/facebook/react-native/issues/49694. There is already a fix for that: https://github.com/facebook/react-native/commit/96939f160b169db422f5d85085375c3cc712345f, but as you can see it's behind feature flag. You could try bump RN to newest version and add feature flag or just apply patch with required change. Let me know if that helps!

[faciledictu]

Hey @maciekstosio! Thanks, it's worth trying at least. Would you mind helping me enable that flag? I couldn't find any info on how to do it