React Navigation (Native-stack) header hide screen after reanimated layout animation run [only in Android]

[jittuu]

Description

After reanimated layout animation runs, react-navigation (native-stack) header hide screen. I'm not sure it is because of react-navigation or reanimated issue, but the app still working fine until reanimated layout animation runs, so I open issue here.

Please check recorded GIF - which can explain error better. 😅

Expected behavior

react-navigation header should not hide screen.

Actual behavior & steps to reproduce

1. Go to Hello (working fine first time)
2. Go to Animated
3. Go to Hello (screen is below header now)

Snack or minimal code example

https://github.com/jittuu/reanimated23-and-nativestack-issue

Package versions

name	version
react-native	0.64.3
react-native-reanimated	2.3.1
NodeJS	v16.13.1
Xcode	13
Java	15
Gradle
expo	44

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web

[split]

We have experienced similar issues with Android. Disappearing and duplicating views connected somehow to layout entering/exit transitions.

Great that you have been able to provide minimal example 👍 I assumed it could be screen or absolute position related, because that was common for the affected views.

[kakajann]

I am also experiencing this only on android

edit: even on the 2.4.0

[sashansk3]

Same on [email protected]

[alanjhughes]

I have just run into this exact issue. Runs perfectly on iOS. Removing any entering or exiting animations fixes the problem

[KrasniqiR]

I'm experiencing something similar in iOS (expo-managed app). If an <Animated.View> with layout prop is somewhere in our render-tree (even a background screen), some views are duplicated or overlap in other screens.

[sallar]

I had the same issue with native-stack, changed my app to use stack for now until this issue is fixed somehow...

[hisothreed]

also having this when using native-stack, anyone found any solution or workaround?

[mathiasandresen]

same issue here

[Guuz]

Can confirm that this is an issue. As soon as Screen A has an Animated.View and no header and you open Screen B that has a header, the content is below the header. As if the header is positioned above it.

[Guuz]

If anyone is interested; this is the workaround we applied:

/**
 * React Native Screens and Reanimated Layout Effects combined result in an issue where the content falls below the native header.
 * To make things worse this issue seems to "fix" itself on Android 10 when the keyboard is opened.
 * This makes it difficult to work around the issue because it's not consistent.
 *
 * As a workaround we force the header to render transparent (position absolute above the content)
 * and add the correct insets as padding. At least this way it works consistently.
 *
 * The issue is tracked here: https://github.com/software-mansion/react-native-reanimated/issues/2906
 */
export default function useApplyHeaderWorkaround(setOptions: (options: NativeStackNavigationOptions) => void) {
  const headerHeight = useHeaderHeight();

  const androidHeaderFix = useMemo(
    () => ({
      headerTransparent: true,
      headerStyle: {backgroundColor: 'white'},
      contentStyle: {paddingTop: headerHeight},
    }),
    [headerHeight],
  );

  React.useLayoutEffect(() => {
    IS_ANDROID && setOptions(androidHeaderFix);
  }, [setOptions, androidHeaderFix]);
}

Which you can use in a Screen component:

useApplyHeaderWorkaround(navigation.setOptions);

[yotamishak]

Are there any plans to investigate this?

[nhanders]

@yotamishak similar android issues have been reported in #3124, with PR #3157 currently in code review to fix it. Fingers crossed that this issue will be fixed by that PR.

[jittuu]

@yotamishak similar android issues have been reported in #3124, with PR #3157 currently in code review to fix it. Fingers crossed that this issue will be fixed by that PR.

@nhanders I doubt that those issues are related since that PR is for iOS while current issue affected Android. 🤔

[yotamishak]

@nhanders

I agree with @jittuu, I just reviewed #3157 and there are only changes in the iOS code. Although they may be similar I don't think it will be resolved in that PR.

[zibs]

This issue still seems to be present on the latest versions of all the packages involved here.

[sallar]

This is a huge issue still.. I don't know which repo this is related to but a fix would be nice.

[andreibarabas]

Experiencing the same issue. I confirm that setting the entering / exiting layout animations solve the issue.

[channeladam]

Yes, also experiencing the issue. Originally I thought it was react-navigation, but could't repro the issue until the entering animation was added. FYI, I snacked it during my journey: https://snack.expo.dev/@adammcraven/adam-nav-issue

[Risbot]

I have the same problem when I use @react-navigation/native-stack with @react-navigation/stack it works correctly

[mlecoq]

After the error on header screen appears, sometimes my app freezes on navigation then crashes and I have the following error about react-native-screen

java.lang.IndexOutOfBoundsException: Index: 2, Size: 1
    at java.util.ArrayList.add(ArrayList.java:483)
    at com.swmansion.rnscreens.ScreenContainer.addScreen(ScreenContainer.kt:97)
    at com.swmansion.rnscreens.ScreenStackViewManager.addView(ScreenStackViewManager.kt:34)
    at com.swmansion.rnscreens.ScreenStackViewManager.addView(ScreenStackViewManager.kt:16)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
    at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.manageChildren(ReanimatedNativeHierarchyManager.java:323)
    at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)

[JoshBot-Debug]

If anyone is interested; this is the workaround we applied:

/**
 * React Native Screens and Reanimated Layout Effects combined result in an issue where the content falls below the native header.
 * To make things worse this issue seems to "fix" itself on Android 10 when the keyboard is opened.
 * This makes it difficult to work around the issue because it's not consistent.
 *
 * As a workaround we force the header to render transparent (position absolute above the content)
 * and add the correct insets as padding. At least this way it works consistently.
 *
 * The issue is tracked here: https://github.com/software-mansion/react-native-reanimated/issues/2906
 */
export default function useApplyHeaderWorkaround(setOptions: (options: NativeStackNavigationOptions) => void) {
  const headerHeight = useHeaderHeight();

  const androidHeaderFix = useMemo(
    () => ({
      headerTransparent: true,
      headerStyle: {backgroundColor: 'white'},
      contentStyle: {paddingTop: headerHeight},
    }),
    [headerHeight],
  );

  React.useLayoutEffect(() => {
    IS_ANDROID && setOptions(androidHeaderFix);
  }, [setOptions, androidHeaderFix]);
}

Which you can use in a Screen component:

useApplyHeaderWorkaround(navigation.setOptions);

I'm using a similar workaround for now, however, it's almost been a year and still this issue exists. For anyone facing this issue who doesn't want to remove layout animations, this sort of fix works. Still though, reanimated needs to always be compatible with react-navigation, I think a lot of people use them together.

[bebe84]

After nearly 10 months of that issue being here is disqualifing for react-native-reanimated as a library for me, I am removing any instances of it from my project. So many hours that were burned to resolve this issue for me is not a happy time. iOS is working, of course, but to provide good values for my clients I need both platforms to work.

👎

[comertcimen]

I have the same issue, is there any progress resolving this bug?

[shubhamdeol]

@bebe84 you are not anybody's client here. It's an open source project. You should be talking about solution here or asking for help. If you have spend many hours on the issue. Please share your findings.

[bebe84]

@shubhamdeol Apologies, thank you for message. A lot of pressure on my shoulders. Yes, findings are more or less the same as ppl wrote above, when you install react-native-reanimated and use @react-navigation/native-stack and use <Animated.View> with layout animations any screen afterwards that have navigation header renders content below it (as if it was absolute).

enableLayoutAnimations(false) fixes it, but if you use layout animations there is no other way as to add paddingTop to every screen that has a header in it

only on Android, iOS is OK

[mk-nickyang]

Looks like Layout Animations rewrite + https://github.com/software-mansion/react-native-reanimated/pull/3791 will fix this issue. Here are the steps worked for me if someone else wants to give it a try

1. Install [email protected] or above
2. Patch it with the changes in https://github.com/software-mansion/react-native-reanimated/pull/3791

FYI, there are also some discussions happening in https://github.com/software-mansion/react-native-reanimated/issues/3368

[shubhamdeol]

@mk-nickyang tried it out. This patch fixes the issue but introduces some other weird issues not sure it's only the case with native stack. Weird issues I noticed

• icon rendering above the text all of sudden with no change from my side
• sometimes view never gets removed from on delete of item on exit animation.

Looks like this is not stable fix.