[MIUI] Navigation Bar re-appears when app is foregrounded

[unendingblue]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

The Navigation Bar re-appears when the app goes from background, back into foreground.

I am unable to reproduce this on an emulator and unfortunately do not have access to the device this behavior occurs on, I have nonetheless visually confirmed it does occur.

I previously had an issue with Reanimated's useAnimatedKeyboard hook, so I provided the user with a build that has it completely removed. The issue persisted.

I am not familiar with native Android, but would it be possible that apart from onResume, edge-to-edge also needs to be explicitly applied to onWindowFocusChanged?

Library version

1.4.2

Environment info

Device: Redmi Note 8
OS: Android 11 - MIUI 12.5.2 Stable
Old Architecture

Steps to reproduce

1. Launch the app
2. Observe Navigation Bar is hidden
3. Put the app into background
4. Reopen the app
5. Observe Navigation Bar is still hidden
6. Tap anywhere on the app once
7. Observe the Navigation Bar appears

Reproducible sample code

<SystemBars style='dark' hidden={{ statusBar: false, navigationBar: true }} />

[zoontek]

@unendingblue By re-appears, do you mean it's not hidden anymore, or it's opaque again? Do you have a screen recording?

[unendingblue]

@zoontek By re-appearing, I mean that the navigation bar animates from the bottom-up when the user taps anywhere on the app after it's foregrounded. It does not go away at all afterwards.

react-native-safe-area-context correctly detects that the bottom insets change, and content is still displayed edge-to-edge. The bar is not opaque, but it is visible (in this case, the 3-button navigation icons).

The style of the bar seemingly plays no role, as I have tried a few already.

I have sent a bare minimum build to the user with a blank App.tsx to see if the issue occurs again. If it does, I'll dig deeper and share the package.json used.

[unendingblue]

Issue is still present on a bare minimum build with a blank App.tsx. Here's the package.json:

"expo": "^52.0.23",
"expo-build-properties": "~0.13.1",
"expo-constants": "~17.0.3",
"expo-dev-client": "~5.0.8",
"expo-font": "~13.0.2",
"expo-updates": "~0.26.10",
"react": "18.3.1",
"react-native": "0.76.5",
"react-native-edge-to-edge": "^1.4.2",
"react-native-gesture-handler": "^2.22.0",
"react-native-reanimated": "^3.16.7",
"react-native-safe-area-context": "^5.1.0"

import { ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { SystemBars } from 'react-native-edge-to-edge';
import { useFonts } from 'expo-font';

const App = () => {
  const [fontsLoaded] = useFonts({ ... });

  if (!fontsLoaded) return;

  return (
    <GestureHandlerRootView style={{ flex: 1, backgroundColor: '#CCCCCC' }}>
      <SafeAreaProvider style={{ flex: 1 }}>
        <ReducedMotionConfig mode={ReduceMotion.Never} />

        <SystemBars style='dark' hidden={{ statusBar: false, navigationBar: true }} />
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
};

[zoontek]

@unendingblue Looks like an Android issue: libsdl-org/SDL#8995
I will check if I can keep the current state and re-enable the immersive mode if the app regain focus.

[unendingblue]

That's quite an odd issue, but maybe it's related to landscape mode? In my case the app is always in portrait mode.

[zoontek]

@unendingblue I tried to reproduce it, but cannot (Pixel 4a, Android 13).
Can you provide a repository and / or a video?

screen-20250123-182100.mp4

[unendingblue]

I ended up creating a build that only has Expo & react-native-edge-to-edge installed, and the issue still persists. Since the repo would just be Expo and this library, I'm only sharing a video from the user below. Please note the black boxes are edited in for privacy.

Something worth noting, the first bar appears in dark theme, and the second one (in-app) follows the plugin settings (Light theme with enforceNavigationBarContrast set to false.

untitled.mp4

[zoontek]

@unendingblue Immersive mode only exists in dark (https://developer.android.com/develop/ui/views/layout/immersive)

But when the app regain focus, it appears that the nav bar immersive mode is disabled by the OS.
Could be a bug in the manufacturer Android implementation (MIUI, etc are often bringing their own issues)

Can you provide more infos about the phone? Brand, model and android version?

I ended up creating a build that only has Expo & react-native-edge-to-edge installed, and the issue still persists. Since the repo would just be Expo and this library

As I can't reproduce it, maybe it's worth it to share the repo.

[unendingblue]

The device is a Redmi Note 8 running Android 11 with MIUI 12.5.2 Stable. I'm also pretty sure at this point that it's likely an issue with Xiaomi's system patches.

I honestly think a repo won't help debug this. The biggest challenge here is not having access to the physical device, though it seems more people have issues with the navigation bar appearing in immersive mode in general.

For now, I think we can close this issue as not a bug with the react-native-edge-to-edge. If I ever stumble across a solution or a reproduction method, I'll let you know.

[zoontek]

I already had MIUI only issues on Bootsplash too, it's terrible.

I don't have access to a Xiaomi device (only Pixels), and they don't provide emulators 😕

[unendingblue]

Yeah, it's very poorly made. For reference, here's what I've found:

https://xdaforums.com/t/status-bar-not-autohiding-in-fullscreen-mode-anymore-in-miui-12.4212895/?utm_source=chatgpt.com

https://xiaomi.eu/community/threads/navigation-bar-bug.68171/?utm_source=chatgpt.com

https://xiaomi.eu/community/threads/auto-hide-navigation-buttons-on-miui-12-5-12.64080/?utm_source=chatgpt.com

[zoontek]

@unendingblue I published a beta version that re-apply statusBarHidden / navigationBarHidden when the app regains focus.

I have no idea if it will have an impact and can't experiment the potential fix without a physical MIUI phone. Could you try it and give me your feedback?

yarn add react-native-edge-to-edge@next

[unendingblue]

@zoontek This fixed it! The navigation bar now stays hidden at all times.

I might be experiencing some safe area hiccups though, as if the bottom inset still considers the bar to be visible. Not sure yet, I'll keep looking and let you know.

[unendingblue]

@zoontek The user has reported the issue with MIUI has been resolved. I additionally found the below issues via the emulator:

1. Expo builds fail for iOS
I am getting the error Union types are unsupported in structs during the Install Pods step, building locally.

2. SystemBars may not be correctly recognizing system navigation type changes
If you try to change the system navigation type while the app is in the background (eg. from 3-button navigation to gesture bar), your SystemBar options may not be applying correctly. This is just a small observation, I didn't spend a lot of time testing since this case is very unlikely to happen during normal use.

3. Inset bug with useAnimatedKeyboard
Once again it appears that the useAnimatedKeyboard hook causes inconsistent behaviors to arise. In my case, child components of a parent that uses the hook along with useSafeAreaInsets seem to be treating the navigation bar as visible (as in, not hidden), even when it's not (as in, it's hidden).

What's curious is that console log (even inside the useAnimatedStyle hook) shows me the correct bottom inset, and yet components with style paddingBottom: insets.bottom are placed as paddingBottom: insets.bottom + <navigation bar height>.

[zoontek]

1. Expo builds fail for iOS

This package is a simple Turbomodule, with only an Android part (no ios directory, no podspec). Is this one really from the library? Can you share the error screenshot / stack?

2. SystemBars may not be correctly recognizing system navigation type changes

Are you mentionning the system bar style? It's height? (react-native-safe-area-insets)

3. Inset bug with useAnimatedKeyboard

Are you correctly setting isStatusBarTranslucent: true and isNavigationBarTranslucent: true? Until this PR is merged, you have too. If the computation is incorrect despite this, it's an issue on reanimated.

[zoontek]

@unendingblue I published a new beta, as I think only a part of the fix is really useful. Could you try it and confirms that it continues to be OK on MIUI?

I also removed the union in the TurboModule (not in a struct, but used as argument, so I doubt this is the issue).

[unendingblue]

I've sent the user a build with the new version, I'll let you know when I hear back. Regarding the other issues:

1. Expo builds fail for iOS
I'm pretty sure it was an issue with beta0. I verified by swapping between 1.4.2 and beta0, and builds consistently failed on the latter. Beta1 works for both iOS and Android.

2. SystemBars may not be correctly recognizing system navigation type changes
I'm referring to the visibility options. For example, if you have the navigation bar set to hidden, and switch from 3-button navigation to gesture navigation while the app is in the background, when you open it again the gesture bar will be visible. I haven't spent a lot of time testing this though, so I'm not sure if it's reproducible.

3. Inset bug with useAnimatedKeyboard
Yes, both isStatusBarTranslucent and isNavigationBarTranslucent are set to true.

[zoontek]

1. Expo builds fail for iOS

Given that "Everything that is doable with bare React Native should be doable in Expo", something might be wrong on their side here, as union are supported in RN Codegen. Let's keep string and inform them about it.

2. SystemBars may not be correctly recognizing system navigation type changes

Even with the beta? As the visibility config is applied each time the app regains focus, it should also tackle this. I tried it, no issue:

Untitled.mp4

3. Inset bug with useAnimatedKeyboard

Then it's an issue on their side. You should open an issue on their repository, as it could occurs with every lib capable of enabling immersive mode.

---

I published 1.4.3 with the MIUI fix, let me know in a future issue if there's something else. Thanks for your help on this! 🙏