diff --git a/src/components/NavigationBar/index.android.tsx b/src/components/NavigationBar/index.android.tsx index 3f066b806a38..6f9a43f79fdc 100644 --- a/src/components/NavigationBar/index.android.tsx +++ b/src/components/NavigationBar/index.android.tsx @@ -1,5 +1,6 @@ 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'; @@ -10,11 +11,12 @@ 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 ? : null; + return isSoftKeyNavigation ? : null; } NavigationBar.displayName = 'NavigationBar'; diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx index 932243ce4c0c..db5250ee8234 100644 --- a/src/components/OfflineIndicator.tsx +++ b/src/components/OfflineIndicator.tsx @@ -20,12 +20,9 @@ type OfflineIndicatorProps = { /** Whether to add bottom safe area padding to the view. */ addBottomSafeAreaPadding?: boolean; - - /** Whether to make the indicator translucent. */ - isTranslucent?: boolean; }; -function OfflineIndicator({style, containerStyles: containerStylesProp, addBottomSafeAreaPadding = false, isTranslucent = false}: OfflineIndicatorProps) { +function OfflineIndicator({style, containerStyles: containerStylesProp, addBottomSafeAreaPadding = false}: OfflineIndicatorProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -42,7 +39,7 @@ function OfflineIndicator({style, containerStyles: containerStylesProp, addBotto } return ( - + , ) { @@ -201,7 +201,7 @@ function ScreenWrapper( const {setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext); const {initialURL} = useContext(InitialURLContext); - const [isSingleNewDotEntry] = useOnyx(ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY); + const [isSingleNewDotEntry] = useOnyx(ONYXKEYS.IS_SINGLE_NEW_DOT_ENTRY, {canBeMissing: true}); // When the `enableEdgeToEdgeBottomSafeAreaPadding` prop is explicitly set, we enable edge-to-edge mode. const isUsingEdgeToEdgeMode = enableEdgeToEdgeBottomSafeAreaPaddingProp !== undefined; @@ -210,7 +210,6 @@ function ScreenWrapper( // We enable all of these flags by default, if we are using edge-to-edge mode. const shouldMobileOfflineIndicatorStickToBottom = shouldMobileOfflineIndicatorStickToBottomProp ?? isUsingEdgeToEdgeMode; const shouldKeyboardOffsetBottomSafeAreaPadding = shouldKeyboardOffsetBottomSafeAreaPaddingProp ?? isUsingEdgeToEdgeMode; - const isOfflineIndicatorTranslucent = isOfflineIndicatorTranslucentProp ?? isUsingEdgeToEdgeMode; // We disable legacy bottom safe area padding handling, if we are using edge-to-edge mode. const includeSafeAreaPaddingBottom = isUsingEdgeToEdgeMode ? false : includeSafeAreaPaddingBottomProp; @@ -362,16 +361,16 @@ function ScreenWrapper( * This style applies the background color of the mobile 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 mobile offline indicator is translucent. - * If `isOfflineIndicatorTranslucent` is set to true, an opaque background color is applied. + * By default, the background color of the mobile offline indicator is opaque. + * If `isOfflineIndicatorTranslucent` is set to true, a translucent background color is applied. */ const mobileOfflineIndicatorBackgroundStyle = useMemo(() => { - const showOfflineIndicatorBackground = !extraContent && (isSoftKeyNavigation || isOffline); + const showOfflineIndicatorBackground = !extraContent && isOffline; if (!showOfflineIndicatorBackground) { return undefined; } - return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG; - }, [extraContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]); + return isOfflineIndicatorTranslucent ? styles.translucentNavigationBarBG : styles.appBG; + }, [extraContent, isOffline, isOfflineIndicatorTranslucent, styles.appBG, styles.translucentNavigationBarBG]); /** In edge-to-edge mode, we always want to apply the bottom safe area padding to the mobile offline indicator. */ const hasMobileOfflineIndicatorBottomSafeAreaPadding = isUsingEdgeToEdgeMode ? enableEdgeToEdgeBottomSafeAreaPadding : !includeSafeAreaPaddingBottom; diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index 8f0b81014b95..84724fa8ceb3 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -17,6 +17,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import {addErrorMessage} from '@libs/ErrorUtils'; @@ -43,6 +44,7 @@ function WorkspaceNewRoomPage() { const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID, {canBeMissing: false}); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth + const {isSmallScreenWidth} = useResponsiveLayout(); const {top} = useSafeAreaInsets(); const [visibility, setVisibility] = useState>(CONST.REPORT.VISIBILITY.RESTRICTED); const [writeCapability, setWriteCapability] = useState>(CONST.REPORT.WRITE_CAPABILITIES.ALL); @@ -234,6 +236,7 @@ function WorkspaceNewRoomPage() { onSubmit={submit} enabledWhenOffline addBottomSafeAreaPadding + addOfflineIndicatorBottomSafeAreaPadding={isSmallScreenWidth} > { if (cardOnWaitlist) { @@ -102,6 +103,8 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA const verificationState = getVerificationState(); const isInVerificationState = !!verificationState; + const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true}); + const renderVerificationStateView = () => { switch (verificationState) { case CONST.EXPENSIFY_CARD.VERIFICATION_STATE.LOADING: @@ -114,6 +117,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA animationWebStyle={styles.loadingVBAAnimationWeb} subtitleStyle={styles.textLabelSupporting} containerStyle={styles.pb20} + addBottomSafeAreaPadding /> ); case CONST.EXPENSIFY_CARD.VERIFICATION_STATE.ON_WAITLIST: @@ -131,7 +135,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA success large text={translate('workspace.expensifyCard.goToConcierge')} - style={[styles.m5]} + style={[styles.m5, bottomSafeAreaPaddingStyle]} pressOnEnter onPress={() => Navigation.navigate(ROUTES.CONCIERGE)} /> @@ -152,7 +156,7 @@ function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankA success large text={translate('workspace.expensifyCard.gotIt')} - style={[styles.m5]} + style={[styles.m5, bottomSafeAreaPaddingStyle]} pressOnEnter onPress={() => { Navigation.dismissModal(); diff --git a/src/styles/index.ts b/src/styles/index.ts index d9e335b30b10..bd48c37b6147 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5659,8 +5659,8 @@ const styles = (theme: ThemeColors) => borderRadius: variables.componentBorderRadiusNormal, }, - navigationBarBG: { - backgroundColor: theme.navigationBarBackgroundColor, + translucentNavigationBarBG: { + backgroundColor: theme.translucentNavigationBarBackgroundColor, }, stickToBottom: { diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 54355ccdc925..3ecd88e1277d 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -154,7 +154,7 @@ const darkTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT, navigationBarButtonsStyle: CONST.NAVIGATION_BAR_BUTTONS_STYLE.LIGHT, - navigationBarBackgroundColor: `${colors.productDark100}CD`, // CD is 80% opacity (80% of 0xFF) + translucentNavigationBarBackgroundColor: `${colors.productDark100}CD`, // CD is 80% opacity (80% of 0xFF) colorScheme: CONST.COLOR_SCHEME.DARK, } satisfies ThemeColors; diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 2b0ac4847a4a..2c17f43eaa9e 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -154,7 +154,7 @@ const lightTheme = { statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT, navigationBarButtonsStyle: CONST.NAVIGATION_BAR_BUTTONS_STYLE.DARK, - navigationBarBackgroundColor: `${colors.productLight100}CD`, // CD is 80% opacity (80% of 0xFF) + translucentNavigationBarBackgroundColor: `${colors.productLight100}CD`, // CD is 80% opacity (80% of 0xFF) colorScheme: CONST.COLOR_SCHEME.LIGHT, } satisfies ThemeColors; diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 18910c35d8f7..a7bc07d330e5 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -109,7 +109,7 @@ type ThemeColors = { // e.g. the StatusBar displays either "light-content" or "dark-content" based on the theme statusBarStyle: StatusBarStyle; navigationBarButtonsStyle: NavBarButtonStyle; - navigationBarBackgroundColor: Color; + translucentNavigationBarBackgroundColor: Color; colorScheme: ColorScheme; };