[$250] Android 3-button navigation bar turns translucent when opening a modal

[chrispader]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

@mountiny @rafecolton

---

Version Number: 9.4.25-1
Reproducible in staging?: yes
Reproducible in production?: yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: /
Email or phone of affected tester (no customers): /
Logs: /
Expensify/Expensify Issue URL: #64241
Issue reported by: @chrispader
Slack conversation (hyperlinked to channel name):

Action Performed:

1. On an Android phone, enable 3-button navigation by going into device settings -> Display -> Navigation mode -> Enable "3-button-navigation"
2. Open the Android Expensify app
3. Go into a chat
4. Click on the "+" to open the popover/modal

Expected Result:

The navigation bar does not change it's appearance, no background or text/icon color change.

Actual Result:

The navigation bar turns translucent with a slightly dimmed background.

Workaround:

None

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Actual result	Expected result
Screen.Recording.2026-04-14.at.17.00.26.mov	Screen.Recording.2026-04-14.at.16.58.53.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022072598242708583245
• Upwork Job ID: 2072598242708583245
• Last Price Increase: 2026-07-02

Issue Owner

Current Issue Owner: @shubham1206agra

Issue Owner

Current Issue Owner: @shubham1206agra

[chrispader]

@rafecolton This is is mainly fixed, although still reproducible on certain specific devices. In order to solve this i would please need AWS DeviceFarm access, so i can test this bug on a Redmi device. 🙌🏼

[MelvinBot]

Proposal

What is the root cause of that problem?

Modals and popovers draw edge-to-edge behind the Android system navigation bar, and then the app paints its own translucent scrim over that region — but only for 3‑button navigation, which is exactly the reported condition.

Two things combine:

1. Modals opt into drawing under the nav bar. BaseModal defaults navigationBarTranslucent = true (and statusBarTranslucent = true), and forwards it to React Native's native <Modal>. On RN 0.83 this makes the modal window (and its full‑screen dimmed backdrop, theme.overlay) extend underneath the system nav bar.

   • src/components/Modal/BaseModal.tsx:51-52, forwarded at :356-357
   • Same defaults for popovers (the chat + menu): PopoverWithMeasuredContentBase.tsx:38-39

2. The modal repaints a translucent nav‑bar scrim. BaseModal renders its own <NavigationBar />, which on Android paints an 80%‑opacity fill over the bottom inset — but only when navigation type is SOFT_KEYS (3‑button); for gesture nav it renders null.

   • src/components/Modal/BaseModal.tsx:395
   • src/components/NavigationBar/index.android.tsx:16-19 (translucentNavigationBarBG, 80% opacity → styles/index.ts:5801-5803)

So the 80% scrim + the modal's dim backdrop overlay the system nav bar → "translucent nav bar with a slightly dimmed background." It's exclusive to 3‑button nav because the <NavigationBar /> scrim only draws for SOFT_KEYS.

What changes do you think we should make in order to solve the problem?

Stop the modal from re‑painting the translucent scrim over the system nav bar. The app already renders an app‑level <NavigationBar /> (src/App.tsx:135), so the region behind the modal is already covered.

Preferred: remove the per‑modal <NavigationBar /> render at BaseModal.tsx:395 (and verify the app‑level bar still shows correctly behind an open modal on a 3‑button device). This is the smallest change that removes the double scrim while keeping edge‑to‑edge behavior intact.

What alternative solutions did you explore? (Optional)

• Set navigationBarTranslucent={false} for these modals/popovers so the window stops drawing under the nav bar. This is riskier: RN's Modal enforces an invariant that navigationBarTranslucent requires statusBarTranslucent (node_modules/react-native/Libraries/Modal/Modal.js), so you can't flip one without the other, and it may reintroduce a status‑bar/keyboard gap the pairing was added to fix.

Confidence & verification

Confidence: High. Two independent investigations converged on the same mechanism with matching file:line evidence, and the behavior is deterministic (no production logs needed — it's a pure rendering issue reproducible on a 3‑button‑nav Android device). The exact regressing PR could not be pinned locally (the App checkout is shallow); a git blame on BaseModal.tsx:395 and the nav‑bar defaults on a full clone would identify it.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/95137) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[kitvasyl]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android devices using 3-button navigation, opening the chat + modal makes the system navigation bar translucent and dimmed instead of preserving its previous appearance.

What is the root cause of that problem?

src/components/Modal/BaseModal.tsx defaults navigationBarTranslucent to true and forwards it to the native modal. This makes the modal extend behind Android's navigation bar, so the modal backdrop changes the bar's visible background when the modal opens.

What changes do you think we should make in order to solve the problem?

In BaseModal, default navigationBarTranslucent to false on Android so ordinary modals do not draw their dimmed backdrop beneath the 3-button navigation bar. Continue forwarding an explicitly supplied value so modal callers that intentionally require edge-to-edge navigation-bar rendering can opt in. Verify that opening and closing the chat + popover leaves both the navigation-bar background and button colors unchanged.

What alternative solutions did you explore? (Optional)

We could add an opaque overlay through NavigationBar, but preventing the native modal from extending beneath the system bar addresses the failing state directly and avoids compensating for it with another view.

[nabi-ebrahimi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android devices using 3-button navigation, opening the chat + menu makes the system navigation bar look translucent and dimmed instead of keeping its normal appearance.

What is the root cause of that problem?

The native RN modal edge-to-edge setup is overriding the app’s navigation-bar contrast setting.

• ReactModalHostView.kt applies dialogWindow.isNavigationBarContrastEnforced from the app theme, but the modal window setup still runs enableEdgeToEdge(), which can reapply the platform’s default contrast behavior afterward: [ReactModalHostView.kt](https://github.com/Expensify/App/blob/3c39afceb7b40b1ebb31d0b340ad0aa5b48123db/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt#L382-L409)
• The app explicitly sets android:enforceNavigationBarContrast="false" for the full-screen dialog theme here: [styles.xml](

  App/android/app/src/main/res/values-v29/styles.xml

  Lines 3 to 9 in 3c39afc

  	<style name="Theme.FullScreenDialog">
  	<item name="android:windowNoTitle">true</item>
  	<item name="android:windowIsFloating">false</item>
  	<item name="android:windowBackground">@android:color/transparent</item>
  	<item name="android:windowDrawsSystemBarBackgrounds">true</item>
  	<item name="android:statusBarColor">@android:color/transparent</item>
  	<item name="android:enforceNavigationBarContrast">false</item>

  )

Because of that ordering, the intended contrast override can be lost when the modal enters edge-to-edge mode, which causes Android to restore the default 3-button nav-bar scrim and makes the bar look translucent.

What changes do you think we should make in order to solve the problem?

Update the native RN modal patch so the enforceNavigationBarContrast override is applied after the modal finishes its edge-to-edge setup. That way, enableEdgeToEdge() cannot clobber the contrast setting, and the system navigation bar keeps its expected opaque appearance when the modal opens.

What alternative solutions did you explore? (Optional)

I also considered changing the JS modal stack defaults, such as making navigationBarTranslucent opt-in or changing the modal-owned NavigationBar filler. Those options can reduce the visible symptom, but they only work at the app layer. Reordering the native modal patch is better because it fixes the underlying Android window behavior directly and is more resilient on devices where the issue still reproduces.

Fixed Demo:

Screenrecorder-2026-07-03-16-24-31-664.mp4

[aswin-s]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android devices with 3-button navigation enabled, opening a chat popover/modal (e.g. tapping the "+" in a chat) causes the system navigation bar to turn translucent with a dimmed background, instead of retaining its normal opaque appearance. The nav bar should not change color, background, or icon appearance when a modal opens.

What is the root cause of that problem?

The RN modal patch that was added to respect the theme's enforceNavigationBarContrast=false runs in the wrong order relative to enableEdgeToEdge(). In node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt (patched by patches/react-native/react-native+0.83.1+022+fix-modal-transparent-navigation-bar.patch), dialogWindow.isNavigationBarContrastEnforced = false is written at line 397 (reading enforceNavigationBarContrast=false from android/app/src/main/res/values-v29/styles.xml:9), and then dialogWindow.enableEdgeToEdge() at line 405 clobbers that value — enableEdgeToEdge re-applies the platform default (isNavigationBarContrastEnforced = true in 3-button/light-scrim mode), which is exactly the "translucent/dimmed" appearance seen in the video. Because BaseModal passes navigationBarTranslucent = true by default (src/components/Modal/BaseModal.tsx:52), every popover/modal hits this branch on Android.

What changes do you think we should make in order to solve the problem?

1. patches/react-native/react-native+0.83.1+022+fix-modal-transparent-navigation-bar.patch — move the enforceNavigationBarContrast read + dialogWindow.isNavigationBarContrastEnforced = … block to run AFTER the if (navigationBarTranslucent) { dialogWindow.enableEdgeToEdge() } else { … } block (i.e. insert it after line 409 of ReactModalHostView.kt, not before line 403), so enableEdgeToEdge() cannot overwrite it.
2. Regenerate the patch with npx patch-package react-native and re-run patch-package on a clean install to confirm the reordered hunk applies cleanly against react-native@0.83.1.
3. Also apply the value inside the else branch (non-translucent path) for symmetry, so the app-theme override is honored regardless of the navigationBarTranslucent prop — cheap and prevents a future regression if a caller passes navigationBarTranslucent={false}.
4. Manually verify on an Android device with 3-button navigation enabled (per the repro): open a chat, tap "+", and confirm the nav bar retains its opaque appearance with no color/icon change; repeat with gesture navigation to confirm no regression.
5. Sanity-check Theme.FullScreenDialog still exists in android/app/src/main/res/values-v29/styles.xml (it does — line 3–10) so R.style.Theme_FullScreenDialog resolves; no Android resource change is needed.

What alternative solutions did you explore? (Optional)

Instead of patching RN, set dialogWindow.isNavigationBarContrastEnforced = false from a native ReactModalHostView-adjacent hook or a small native module invoked from BaseModal's onModalShow — rejected because the write must happen before the dialog attaches to the window manager, which JS-side callbacks cannot guarantee.

[lorretheboy]

Proposal

What is the root cause of that problem?

On Android, modals are rendered with statusBarTranslucent/navigationBarTranslucent defaulting to true, so the RN Modal window draws edge-to-edge underneath the 3-button navigation bar, and the full-screen backdrop dims that area too:

App/src/components/Modal/BaseModal.tsx

Lines 51 to 52 in 3c39afc

	statusBarTranslucent = true,
	navigationBarTranslucent = true,

To paint the nav bar region back, BaseModal renders a NavigationBar inside the modal:

App/src/components/Modal/BaseModal.tsx

Line 395 in 3c39afc

{!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}

but when online it uses the semi-transparent scrim style instead of an opaque background:

App/src/components/NavigationBar/index.android.tsx

Line 19 in 3c39afc

return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;

That scrim is the app background color at only 80% opacity:

App/src/styles/theme/themes/dark.ts

Line 206 in 3c39afc

translucentNavigationBarBackgroundColor: `${colors.productDark100}CD`, // CD is 80% opacity (80% of 0xFF)

On a normal screen the nav bar sits on the opaque app background, so an 80%-opaque scrim over it would look identical. Inside a modal, though, the scrim is composited on top of the dimmed backdrop, so 20% of the dark overlay shows through → the nav bar visibly turns translucent/dimmed the moment the popover opens.

What changes do you think we should make in order to solve the problem?

In NavigationBar/index.android.tsx (only ever rendered from BaseModal, so this fixes every modal type — popover, bottom-docked, centered), stop using the translucent scrim and always paint the nav bar area with the opaque app background, i.e. replace isOffline ? styles.appBG : styles.translucentNavigationBarBG with just styles.appBG (the offline branch already does this, which is why the bar looks correct offline). With an opaque appBG fill the nav bar looks exactly the same before and after the modal opens, matching the expected result. The now-unused useNetwork check can be removed, and if translucentNavigationBarBG/translucentNavigationBarBackgroundColor end up with no remaining consumers they can be cleaned up too.

What alternative solutions did you explore? (Optional)

Passing navigationBarTranslucent={false} to the RN Modal so Android keeps the nav bar outside the modal window — rejected because edge-to-edge is enforced on Android 15+ and opting the modal window out causes the content to jump/resize when the modal opens.

[KJ21-ENG]

Proposal

What is the root cause of that problem?

Android soft-key navigation is normally covered by screen-level background handling, but when the composer + menu opens, it is rendered through PopoverMenu -> PopoverWithMeasuredContent -> Modal. BaseModal always renders a NavigationBar inside the modal window while the keyboard is hidden, and the Android NavigationBar component always uses styles.translucentNavigationBarBG for soft-key navigation. That replaces the existing chat screen's nav-bar background with the modal's semi-translucent nav-bar layer, so the 3-button nav area visibly changes as soon as the modal opens.

App/src/pages/inbox/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx

Lines 493 to 520 in 3c39afc

	<PopoverMenu
	isVisible={isMenuVisible && isFocused}
	onClose={onPopoverMenuClose}
	onItemSelected={(item, index) => {
	setMenuVisibility(false);
	onItemSelected();
	// In order for the file picker to open dynamically, the click
	// function must be called from within a event handler that was initiated
	// by the user on Safari.
	if (index === menuItems.length - 1) {
	if (isSafari()) {
	triggerAttachmentPicker();
	return;
	}
	close(() => {
	triggerAttachmentPicker();
	});
	}
	}}
	anchorPosition={popoverAnchorPosition ?? {horizontal: 0, vertical: 0}}
	anchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
	}}
	menuItems={menuItems}
	anchorRef={actionButtonRef}
	/>

App/src/components/PopoverMenu/index.tsx

Lines 672 to 724 in 3c39afc

	return (
	<PopoverWithMeasuredContent
	anchorPosition={anchorPosition}
	anchorRef={anchorRef}
	anchorAlignment={anchorAlignment}
	onClose={() => {
	setCurrentMenuItems(menuItems);
	setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY);
	onClose();
	}}
	isVisible={isVisible}
	onModalHide={handleModalHide}
	onModalShow={onModalShow}
	animationIn={animationIn}
	animationOut={animationOut}
	animationInDelay={animationInDelay}
	animationInTiming={animationInTiming}
	animationOutTiming={animationOutTiming}
	disableAnimation={disableAnimation}
	fromSidebarMediumScreen={fromSidebarMediumScreen}
	withoutOverlay={withoutOverlay}
	shouldSetModalVisibility={shouldSetModalVisibility}
	shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
	restoreFocusType={restoreFocusType}
	innerContainerStyle={{...styles.pv0, ...innerContainerStyle}}
	shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
	shouldHandleNavigationBack={shouldHandleNavigationBack}
	testID={testID}
	shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={!shouldUseScrollView}
	enableEdgeToEdgeBottomSafeAreaPadding={enableEdgeToEdgeBottomSafeAreaPadding}
	>
	<FocusTrapForModal
	active={isVisible}
	shouldReturnFocus={!shouldEnableNewFocusManagement}
	>
	<CompactMenuContext.Provider value>
	<View
	onLayout={onLayout}
	style={[restMenuContainerStyle, restContainerStyles, isWeb ? styles.flex1 : styles.flexGrow1]}
	>
	<PopoverMenuContent
	shouldUseScrollView={shouldUseScrollView}
	contentContainerStyle={[scrollViewPaddingStyles, restScrollContainerStyle]}
	addBottomSafeAreaPadding={enableEdgeToEdgeBottomSafeAreaPadding}
	>
	{renderHeaderText()}
	{enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
	{renderedMenuItems}
	</PopoverMenuContent>
	</View>
	</CompactMenuContext.Provider>
	</FocusTrapForModal>
	</PopoverWithMeasuredContent>

App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

Lines 193 to 204 in 3c39afc

	return isContentMeasured ? (
	<Popover
	shouldHandleNavigationBack={shouldHandleNavigationBack}
	popoverDimensions={{height: popoverHeight, width: popoverWidth}}
	anchorAlignment={anchorAlignment}
	isVisible={isVisible}
	withoutOverlay={withoutOverlay}
	fullscreen={fullscreen}
	shouldSetModalVisibility={shouldSetModalVisibility}
	statusBarTranslucent={statusBarTranslucent}
	navigationBarTranslucent={navigationBarTranslucent}
	avoidKeyboard={avoidKeyboard}

App/src/components/Modal/BaseModal.tsx

Lines 393 to 396 in 3c39afc

	<ColorSchemeWrapper>{shouldWrapChildrenInScrollView ? <ScrollView>{children}</ScrollView> : children}</ColorSchemeWrapper>
	</Animated.View>
	{!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}
	</ReanimatedModal>

App/src/components/NavigationBar/index.android.tsx

Lines 9 to 19 in 3c39afc

	/** NavigationBar renders a semi-translucent background behind the three-button navigation bar on Android. */
	function NavigationBar() {
	const styles = useThemeStyles();
	const StyleUtils = useStyleUtils();
	const {insets, paddingBottom} = useSafeAreaPaddings();
	const {isOffline} = useNetwork();
	const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
	const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
	return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;

What changes do you think we should make in order to solve the problem?

Make the modal-rendered Android NavigationBar use the same opaque app background that screen/offline-indicator handling already uses for soft-key navigation, instead of always using the translucent nav-bar background. One small way to do that is to add a prop to NavigationBar such as shouldUseTranslucentBackground, default it to the current behavior for the app-level instance, and pass false from BaseModal when rendering the modal-owned nav bar. Then the modal can still occupy the soft-key safe area, but opening the composer action menu no longer changes the nav bar's visual treatment.

The existing screen-level soft-key background logic already uses styles.appBG when the indicator is not intentionally translucent, so this keeps the modal behavior aligned with the rest of the app instead of introducing a new color.

App/src/components/ScreenWrapper/ScreenWrapperOfflineIndicators.tsx

Lines 54 to 71 in 3c39afc

	const {insets} = useSafeAreaPaddings(true);
	const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
	const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
	/**
	* This style applies the background color of the small screen offline indicator.
	* When there is not bottom content, and the device either has soft keys or is offline,
	* the background style is applied.
	* By default, the background color of the small screen offline indicator is translucent.
	* If `isOfflineIndicatorTranslucent` is set to true, an opaque background color is applied.
	*/
	const smallScreenOfflineIndicatorBackgroundStyle = useMemo(() => {
	const showOfflineIndicatorBackground = !extraContent && (isSoftKeyNavigation || isOffline);
	if (!showOfflineIndicatorBackground) {
	return undefined;
	}
	return isOfflineIndicatorTranslucent ? styles.translucentNavigationBarBG : styles.appBG;
	}, [extraContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.translucentNavigationBarBG]);

Test coverage:

• Add/update a focused Android component test for NavigationBar to verify soft-key navigation renders styles.appBG when the new prop disables translucency and preserves styles.translucentNavigationBarBG by default.
• Manually verify on Android with 3-button navigation enabled: open a chat, tap the composer +, and confirm the system navigation bar background and button color do not change while the menu is visible or after it closes.

What alternative solutions did you explore? (Optional)

I considered passing navigationBarTranslucent={false} only from the composer PopoverMenu, but that fixes this one entry point by changing Android modal window behavior and can create inconsistent safe-area handling for bottom-docked popovers. Keeping the modal window behavior unchanged and fixing the nav-bar layer rendered by BaseModal is narrower to the visible regression.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android, when 3-button navigation is enabled and the user opens any popover/modal (e.g. tapping the "+" button in a chat), the system navigation bar unexpectedly turns translucent with a slightly dimmed background. The navigation bar's appearance (background/icon color) should not change at all when a modal opens.

What is the root cause of that problem?

Every modal rendered through BaseModal defaults navigationBarTranslucent to true, which tells the native Android Modal/Dialog window to draw under (make transparent) the real system navigation bar:

App/src/components/Modal/BaseModal.tsx

Lines 51 to 52 in 35fece7

	statusBarTranslucent = true,
	navigationBarTranslucent = true,

Because the real nav bar becomes transparent, BaseModal unconditionally renders a compensating <NavigationBar /> view (an app-colored rectangle) behind the soft keys so the nav bar still looks "normal":

App/src/components/Modal/BaseModal.tsx

Line 395 in 35fece7

{!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}

The bug is in that compensating view itself. On Android, whenever the device is online, it fills the soft-key area with styles.translucentNavigationBarBG instead of a fully opaque color, only falling back to the opaque styles.appBG while offline:

App/src/components/NavigationBar/index.android.tsx

Line 19 in 35fece7

return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;

translucentNavigationBarBG is defined as an 80%-opacity color (CD = 80% alpha), which is why the nav bar visibly dims instead of blending in seamlessly:

App/src/styles/theme/themes/light.ts

Line 206 in 35fece7

translucentNavigationBarBackgroundColor: `${colors.productLight100}CD`, // CD is 80% opacity (80% of 0xFF)

This isOffline branching only makes sense for the unrelated ScreenWrapperOfflineIndicators component (where a translucent background is intentionally used behind the offline indicator). It was carried over into NavigationBar, which is used exclusively inside BaseModal for every popover/modal, so every time a modal opens while online, the soft-key nav bar area renders with a visibly dimmed 80%-opacity background instead of staying visually identical to the rest of the screen.

What changes do you think we should make in order to solve the problem?

Make the compensating navigation bar background always fully opaque (matching the app background), regardless of network state, so opening a modal never visibly changes the nav bar's appearance.

App/src/components/NavigationBar/index.android.tsx

Lines 1 to 22 in 35fece7

	import {useMemo} from 'react';
	import {View} from 'react-native';
	import useNetwork from '@hooks/useNetwork';
	import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
	import useStyleUtils from '@hooks/useStyleUtils';
	import useThemeStyles from '@hooks/useThemeStyles';
	import CONST from '@src/CONST';
	/** NavigationBar renders a semi-translucent background behind the three-button navigation bar on Android. */
	function NavigationBar() {
	const styles = useThemeStyles();
	const StyleUtils = useStyleUtils();
	const {insets, paddingBottom} = useSafeAreaPaddings();
	const {isOffline} = useNetwork();
	const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
	const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
	return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;
	}
	export default NavigationBar;

import {useMemo} from 'react';
import {View} from 'react-native';
import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';

/** NavigationBar renders a background behind the three-button navigation bar on Android. */
function NavigationBar() {
    const styles = useThemeStyles();
    const StyleUtils = useStyleUtils();
    const {insets, paddingBottom} = useSafeAreaPaddings();

    const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
    const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;

    return isSoftKeyNavigation ? <View style={[styles.appBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;
}

export default NavigationBar;

[ahmdshrif]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Android with 3‑button navigation, opening any modal/popover (e.g. the chat "+" menu) makes the system navigation bar look translucent/dimmed. The nav bar should keep its normal appearance while a modal is open.

What is the root cause of that problem?

The modal renders edge‑to‑edge behind the navigation bar, and the piece that is supposed to keep the nav bar looking normal is only 80% opaque, so the modal's dark backdrop bleeds through and dims it.

1. Every modal renders with navigationBarTranslucent = true by default, which is forwarded to the native RN <Modal>. So the modal (and its backdrop) extend under the 3‑button nav bar. BaseModal default:

   App/src/components/Modal/BaseModal.tsx

   Line 52 in 3c39afc

   navigationBarTranslucent = true,

   forwarded at

   App/src/components/Modal/BaseModal.tsx

   Line 357 in 3c39afc

   navigationBarTranslucent={navigationBarTranslucent}

   and spread onto native <Modal {...props}> at

   App/src/components/Modal/ReanimatedModal/index.tsx

   Lines 232 to 246 in 3c39afc

   	<Modal
   	transparent
   	animationType="none"
   	visible={modalVisibility}
   	onRequestClose={onBackButtonPressHandler}
   	statusBarTranslucent={statusBarTranslucent}
   	testID={testID}
   	onDismiss={() => {
   	onDismiss?.();
   	if (getPlatform() !== CONST.PLATFORM.ANDROID) {
   	onModalHide();
   	}
   	}}
   	style={modalStyle}
   	{...props}

2. The backdrop is a full‑screen black overlay at overlayOpacity: 0.72 covering the nav‑bar strip too:

   App/src/styles/variables.ts

   Line 149 in 3c39afc

   overlayOpacity: 0.72,

3. To compensate, BaseModal renders its own <NavigationBar /> on top of the backdrop over that strip:

   App/src/components/Modal/BaseModal.tsx

   Line 395 in 3c39afc

   {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}

4. But on Android that compensation view, when online, paints translucentNavigationBarBG, which is only 80% opaque (...CD):

   App/src/components/NavigationBar/index.android.tsx

   Line 19 in 3c39afc

   return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;

   color at

   App/src/styles/theme/themes/light.ts

   Lines 205 to 206 in 3c39afc

   	navigationBarButtonsStyle: CONST.NAVIGATION_BAR_BUTTONS_STYLE.DARK,
   	translucentNavigationBarBackgroundColor: `${colors.productLight100}CD`, // CD is 80% opacity (80% of 0xFF)

So over the modal: 80% app color + 20% of the 0.72 black backdrop showing through = the "slightly dimmed / translucent" nav bar. Structural cause: the modal reuses the app‑wide translucent nav‑bar background, which only looks correct when it sits over the light app content (at rest); inside a modal it sits over a dark backdrop, where 80% opacity is not enough to hide it.

This explains every detail: Android‑only (index.tsx for iOS/web returns null — no such view:

App/src/components/NavigationBar/index.tsx

Lines 1 to 5 in 3c39afc

	function NavigationBar() {
	return null;
	}
	export default NavigationBar;

); 3‑button‑only (the View only renders for SOFT_KEYS

App/src/styles/utils/getNavigationBarType/index.android.ts

Lines 1 to 17 in 3c39afc

	import NavBarManager from '@libs/NavBarManager';
	import CONST from '@src/CONST';
	import type GetNavigationBarType from './types';
	const getNavigationBarType: GetNavigationBarType = (insets) => {
	const bottomInset = insets?.bottom ?? 0;
	// If the bottom safe area inset is 0, we consider the device to have no navigation bar (or it being hidden by default).
	// This could be mean either hidden soft keys, gesture navigation without a gesture bar or physical buttons.
	if (bottomInset === 0) {
	return CONST.NAVIGATION_BAR_TYPE.NONE;
	}
	return NavBarManager.getType();
	};
	export default getNavigationBarType;

); only when a modal opens (only then is there a dark backdrop behind the bar). Offline already looks fine because that branch uses opaque appBG.

Affected render sites of <NavigationBar />: the in‑modal one (BaseModal L395 — the bug) and the persistent app‑level one (App.tsx

App/src/App.tsx

Line 135 in 3c39afc

<NavigationBar />

, must stay translucent). The "+" popup reaches this via Popover → @components/Modal → BaseModal, so the single BaseModal site covers all popovers/modals.

What changes do you think we should make in order to solve the problem?

Make the modal's compensation nav bar opaque, exactly like the existing offline branch, while leaving the app‑wide bar translucent. Add an opt‑in prop to NavigationBar:

src/components/NavigationBar/index.android.tsx

function NavigationBar({isModalNavigationBar = false}: NavigationBarProps) {
    ...
    const backgroundStyle = isOffline || isModalNavigationBar ? styles.appBG : styles.translucentNavigationBarBG;
    return isSoftKeyNavigation ? <View style={[backgroundStyle, styles.stickToBottom, {height: paddingBottom}]} /> : null;
}

Add the same optional prop to index.tsx (the null iOS/web version, for typing) and pass it at BaseModal L395: <NavigationBar isModalNavigationBar />.

Regression safety (one line): default is false, so App.tsx's persistent bar stays translucent, gesture‑nav/no‑bar and iOS/web still return null, and offline is unchanged — only the online in‑modal Android bar becomes opaque.

Why the obvious one‑liners fail:

• Setting navigationBarTranslucent={false} on the modal reverts intentional edge‑to‑edge behavior added in feat: edge-to-edge mode on Android (PR #52392): the native Modal would reserve a solid, theme‑mismatched nav‑bar inset and break edge‑to‑edge modal content — and reviewers reject reverting intentional behavior.
• Making translucentNavigationBarBackgroundColor opaque regresses the app‑wide translucent nav bar introduced in PR #57128 (content is meant to show through it at rest) and also alters the offline logic. The dimming must be fixed only where the dark backdrop exists — inside the modal.

What alternative solutions did you explore? (Optional)

• Opaque global color / navigationBarTranslucent=false — the two spot‑fixes above; both regress intentional edge‑to‑edge / translucent behavior (rejected).
• Shrink the backdrop so it stops above the nav bar — would leave a visibly un‑dimmed gap and fights the edge‑to‑edge design; the compensation‑view approach already in place is the intended pattern, it just needs to be opaque inside modals.
• Reuse ScreenWrapperOfflineIndicators' isOfflineIndicatorTranslucent pattern — same idea (opaque vs translucent toggle); scoping it via a NavigationBar prop keeps the change to the two real render sites.

[dilshodmackbook-sketch]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-02 08:38:12 UTC.

Proposal

What is the root cause of that problem?

Modals and popovers default to navigationBarTranslucent = true, so the modal's native dialog window is drawn edge-to-edge behind the system navigation bar:

• App/src/components/Modal/BaseModal.tsx

  Line 52 in 3c39afc

  navigationBarTranslucent = true,

• App/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx

  Line 39 in 3c39afc

  navigationBarTranslucent = true,

On Android Q+, an edge-to-edge window with a transparent nav bar keeps isNavigationBarContrastEnforced = true by default, so the system paints its own translucent scrim behind the 3-button nav bar. That system scrim, together with the modal's dimmed backdrop, is the "translucent, slightly dimmed" look.

We recently started disabling this on stock Android: patch 022 reads android:enforceNavigationBarContrast from Theme.FullScreenDialog, and NewDot sets it false in values-v29/styles.xml:

• App/patches/react-native/react-native+0.83.1+022+fix-modal-transparent-navigation-bar.patch

  Lines 9 to 21 in 3c39afc

  	+ // If enforceNavigationBarContrast is explicitly set in the app theme (AppTheme),
  	+ // we need to override the default behaviour for edge-to-edge mode in WindowUtils.setSystemBarsTranslucency.
  	+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
  	+ val attrs = intArrayOf(android.R.attr.enforceNavigationBarContrast)
  	+ val ta = context.obtainStyledAttributes(R.style.Theme_FullScreenDialog, attrs)
  	+
  	+ if (ta.length() == 1) {
  	+ val enforceNavigationBarContrastStyleValue = ta.getBoolean(0, false)
  	+ dialogWindow.isNavigationBarContrastEnforced = enforceNavigationBarContrastStyleValue
  	+ }
  	+
  	+ ta.recycle()
  	+ }

• App/android/app/src/main/res/values-v29/styles.xml

  Lines 3 to 9 in 3c39afc

  	<style name="Theme.FullScreenDialog">
  	<item name="android:windowNoTitle">true</item>
  	<item name="android:windowIsFloating">false</item>
  	<item name="android:windowBackground">@android:color/transparent</item>
  	<item name="android:windowDrawsSystemBarBackgrounds">true</item>
  	<item name="android:statusBarColor">@android:color/transparent</item>
  	<item name="android:enforceNavigationBarContrast">false</item>

But that override is only honored when the theme actually defines the attribute (the ta.length() == 1 guard), and the HybridApp build (Mobile-Expensify) doesn't override Theme.FullScreenDialog; on top of that, some OEMs (e.g. Redmi/MIUI, matching the "still reproducible on specific devices" note) re-apply their own nav-bar contrast regardless of the theme. In all of these cases the region ends up with a residual system scrim behind the nav bar, and the in-modal <NavigationBar> only repaints it with an 80% translucent fill:

App/src/components/NavigationBar/index.android.tsx

Line 19 in 3c39afc

return isSoftKeyNavigation ? <View style={[isOffline ? styles.appBG : styles.translucentNavigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;

(translucentNavigationBarBG = app background at 80% opacity:

App/src/styles/theme/themes/dark.ts

Line 206 in 3c39afc

translucentNavigationBarBackgroundColor: `${colors.productDark100}CD`, // CD is 80% opacity (80% of 0xFF)

). Because it is only 80% opaque, the residual scrim / dimmed backdrop shows through the remaining 20%, so the bar visibly dims the moment a modal opens. It is exclusive to 3-button nav because that View only renders for SOFT_KEYS.

What changes do you think we should make in order to solve the problem?

Make the in-modal nav bar region opaque, so nothing behind it (a system contrast scrim or the modal backdrop) can show through — independent of per-OEM behavior. NavigationBar/index.android.tsx is only rendered from BaseModal, so we can drop the translucent branch and always paint appBG, which is exactly what the offline branch already does (and why it looks correct offline):

return isSoftKeyNavigation ? (
  <View
    style={[styles.appBG, styles.stickToBottom, { height: paddingBottom }]}
  />
) : null;

The useNetwork/isOffline check is then unnecessary here, and translucentNavigationBarBG / translucentNavigationBarBackgroundColor can be cleaned up if they have no other consumers. This keeps the modal's edge-to-edge behavior intact while making the nav bar look identical before and after a modal opens — on stock Android and on OEMs that ignore the theme-level fix.

What alternative solutions did you explore? (Optional)

Rely only on the theme fix — add android:enforceNavigationBarContrast=false to the HybridApp's Theme.FullScreenDialog (mirroring App/android/.../values-v29/styles.xml). That helps on stock Android, but per the "still reproducible on specific devices" report, OEMs like Redmi/MIUI re-enforce their own contrast, so it is not sufficient on its own; the opaque fill above is device-independent and can complement it.

Set navigationBarTranslucent={false} so the window stops drawing under the nav bar — rejected because RN enforces that navigationBarTranslucent requires statusBarTranslucent, and opting the modal window out changes its edge-to-edge layout/safe-area and risks content jumping on Android 15+.