[Android] Weird conflict with React Native Navigation

[WyrdRaven]

Description

When using the Drawer + Native Stack Navigation in Android, there's weird behavior happening whenever an Animated.View is added: When rendering the screen, you'll get a flicker and a space will be left between the header and the content. Navigating from one screen to another will make everything look okay again. However, if you focus on a text input, you'll once again experience the same behavior.

Issue does not happen in iOS. Happens both on Emulator and Real Device.

Steps to reproduce

1. Add React Native Reanimated, React Native Navigation's Drawer and Stack Navigators following the installation of dependencies.
2. Create a Drawer, with a stack navigator, with a screen.
3. Add an Animated.View Component inside the screen.
4. (Optional) Add a TextInput in order to trigger the error again.

Snack or a link to a repository

https://snack.expo.dev/@mordnacht/android-error

Reanimated version

2.12.0

React Native version

0.70.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[WyrdRaven]

Forgot to mention that I added a bug in React Native Navigation's Github account as well, to see if there's a better chance to understand what's going on: https://github.com/react-navigation/react-navigation/issues/11108

[DanielSRS]

@WyrdRaven I had this issue before. The problem was caused by layout animations. For me removing all layout animations solved it.

Try removing it (in all places) and check if it 'solves' the problem.

Not sure if this is a problem with React Navigation or Reanimated's Layout Animations (they rewrite it in version 3, so maybe it is already fixed)

[szydlovsky]

Can confirm it is fixed by now (3.12.1) 🥳

[szydlovsky]

Package versions are:

"dependencies": {
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "react": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-reanimated": "^3.12.1",
    "react-native-safe-area-context": "^4.10.5",
    "react-native-screens": "^3.32.0"
  },