feat: Add logic for better bottom SafeArea handling + Enable translucent Android NavBar

android/app/src/main/java/com/expensify/chat/navbar/NavBarManagerModule.kt

@@ -1,10 +1,12 @@
 package com.expensify.chat.navbar
 
+import android.content.res.Resources
 import androidx.core.view.WindowInsetsControllerCompat
+import com.expensify.chat.R
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.UiThreadUtil
 
 class NavBarManagerModule(
     private val mReactContext: ReactApplicationContext,
@@ -24,4 +26,18 @@ class NavBarManagerModule(
             }
         }
     }
+
+    @ReactMethod
+    fun getType(): String {
+        val resources = mReactContext.resources
+        val resourceId = resources.getIdentifier("config_navBarInteractionMode", "integer", "android");
+        if (resourceId > 0) {
+            val navBarInteractionMode = resources.getInteger(resourceId)
+            when (navBarInteractionMode) {
+                0, 1 -> return "soft-keys"
+                2 -> return "gesture-bar"
+            }
+        }
+        return "soft-keys";
+    }
 }

contributingGuides/FORMS.md

@@ -68,7 +68,7 @@ Browsers use the name prop to autofill information into the input. Here's a [ref
 
 ```jsx
 <InputWrapper
-    InputComponent={TextInput} 
+    InputComponent={TextInput}
     name="fname"
 />
 ```
@@ -118,7 +118,7 @@ Once a user has “touched” an input, i.e. blurred the input, we will also sta
 
 All form fields will additionally be validated when the form is submitted. Although we are validating on blur this additional step is necessary to cover edge cases where forms are auto-filled or when a form is submitted by pressing enter (i.e. there will be only a ‘submit’ event and no ‘blur’ event to hook into).
 
-The Form component takes care of validation internally and the only requirement is that we pass a validate callback prop. The validate callback takes in the input values as argument and should return an object with shape `{[inputID]: errorMessage}`. 
+The Form component takes care of validation internally and the only requirement is that we pass a validate callback prop. The validate callback takes in the input values as argument and should return an object with shape `{[inputID]: errorMessage}`.
 
 Here's an example for a form that has two inputs, `routingNumber` and `accountNumber`:
 
@@ -332,10 +332,10 @@ An example of this can be seen in the [ACHContractStep](https://github.com/Expen
 ### Safe Area Padding
 
 Any `FormProvider.tsx` that has a button at the bottom. If the `<FormProvider>` is inside a `<ScreenWrapper>`, the bottom safe area inset is handled automatically (`includeSafeAreaPaddingBottom` needs to be set to `true`, but its the default).
-If you have custom requirements and can't use `<ScreenWrapper includeSafeAreaPaddingBottom={true}>`, you can use the `useStyledSafeAreaInsets()` hook:
+If you have custom requirements and can't use `<ScreenWrapper includeSafeAreaPaddingBottom={true}>`, you can use the `useSafeAreaPaddings()` hook:
 
 ```jsx
-const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets();
+const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useSafeAreaPaddings();
 
 <View styles={[safeAreaPaddingBottomStyle, styles.pb5]}>
     <FormProvider>

src/App.tsx

@@ -17,6 +17,7 @@ import InitialURLContextProvider from './components/InitialURLContextProvider';
 import {InputBlurContextProvider} from './components/InputBlurContext';
 import KeyboardProvider from './components/KeyboardProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
+import NavigationBar from './components/NavigationBar';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import {ProductTrainingContextProvider} from './components/ProductTrainingContext';
@@ -118,6 +119,7 @@ function App({url, hybridAppSettings, timestamp}: AppProps) {
                                     <Expensify />
                                 </ColorSchemeWrapper>
                             </ErrorBoundary>
+                            <NavigationBar />
                         </ComposeProviders>
                     </GestureHandlerRootView>
                 </InitialURLContextProvider>

src/CONST.ts

@@ -1533,6 +1533,20 @@ const CONST = {
         LIGHT: 'light',
         DARK: 'dark',
     },
+    NAVIGATION_BAR_TYPE: {
+        // We consider there to be no navigation bar in one of these cases:
+        // 1. The device has physical navigation buttons
+        // 2. The device uses gesture navigation without a gesture bar.
+        // 3. The device uses hidden (auto-hiding) soft keys.
+        NONE: 'none',
+        SOFT_KEYS: 'soft-keys',
+        GESTURE_BAR: 'gesture-bar',
+    },
+    // Currently, in Android there is no native API to detect the type of navigation bar (soft keys vs. gesture).
+    // The navigation bar on (standard) Android devices is around 30-50dpi tall. (Samsung: 40dpi, Huawei: ~34dpi)
+    // To leave room to detect soft-key navigation bars on non-standard Android devices,
+    // we set this height threshold to 30dpi, since gesture bars will never be taller than that. (Samsung & Huawei: ~14-15dpi)
+    NAVIGATION_BAR_ANDROID_SOFT_KEYS_MINIMUM_HEIGHT_THRESHOLD: 30,
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Expense',
         UNKNOWN_MERCHANT: 'Unknown Merchant',

src/components/Attachments/AttachmentView/index.tsx

@@ -14,7 +14,7 @@ import Text from '@components/Text';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -116,7 +116,7 @@ function AttachmentView({
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
 
     const theme = useTheme();
-    const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
+    const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [loadComplete, setLoadComplete] = useState(false);

src/components/AutoCompleteSuggestions/index.tsx

@@ -64,7 +64,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
     const {keyboardHeight, isKeyboardAnimatingRef} = useKeyboardState();
-    const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getPlatformSafeAreaPadding(insets ?? undefined);
 
     useEffect(() => {
         const container = containerRef.current;

src/components/BlockingViews/BlockingView.tsx

@@ -11,6 +11,7 @@ import Lottie from '@components/Lottie';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -47,6 +48,9 @@ type BaseBlockingViewProps = {
 
     /** Additional styles to apply to the container */
     containerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to add bottom safe area padding to the view. */
+    addBottomSafeAreaPadding?: boolean;
 };
 
 type BlockingViewIconProps = {
@@ -94,7 +98,8 @@ function BlockingView({
     animationWebStyle = {},
     CustomSubtitle,
     contentFitImage,
-    containerStyle,
+    containerStyle: containerStyleProp,
+    addBottomSafeAreaPadding = false,
 }: BlockingViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -132,6 +137,8 @@ function BlockingView({
         );
     }, [styles, subtitleText, shouldEmbedLinkWithSubtitle, CustomSubtitle]);
 
+    const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: containerStyleProp});
+
     return (
         <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10, containerStyle]}>
             {!!animation && (

src/components/BlockingViews/FullPageNotFoundView.tsx

@@ -50,6 +50,9 @@ type FullPageNotFoundViewProps = {
 
     /** Whether we should display the button that opens new SearchRouter */
     shouldDisplaySearchRouter?: boolean;
+
+    /** Whether to add bottom safe area padding to the view. */
+    addBottomSafeAreaPadding?: boolean;
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables
@@ -67,6 +70,7 @@ function FullPageNotFoundView({
     shouldForceFullScreen = false,
     subtitleStyle,
     shouldDisplaySearchRouter,
+    addBottomSafeAreaPadding = true,
 }: FullPageNotFoundViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -93,6 +97,7 @@ function FullPageNotFoundView({
                         shouldShowLink={shouldShowLink}
                         onLinkPress={onLinkPress}
                         subtitleStyle={subtitleStyle}
+                        addBottomSafeAreaPadding={addBottomSafeAreaPadding}
                     />
                 </View>
             </ForceFullScreenView>

src/components/BlockingViews/FullPageOfflineBlockingView.tsx

@@ -6,7 +6,12 @@ import useTheme from '@hooks/useTheme';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import BlockingView from './BlockingView';
 
-function FullPageOfflineBlockingView({children}: ChildrenProps) {
+type FullPageOfflineBlockingViewProps = ChildrenProps & {
+    /** Whether to add bottom safe area padding to the view. */
+    addBottomSafeAreaPadding?: boolean;
+};
+
+function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true}: FullPageOfflineBlockingViewProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -19,6 +24,7 @@ function FullPageOfflineBlockingView({children}: ChildrenProps) {
                 iconColor={theme.offline}
                 title={translate('common.youAppearToBeOffline')}
                 subtitle={translate('common.thisFeatureRequiresInternet')}
+                addBottomSafeAreaPadding={addBottomSafeAreaPadding}
             />
         );
     }

src/components/Button/index.tsx

@@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {ActivityIndicator, View} from 'react-native';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -152,6 +152,12 @@ type ButtonProps = Partial<ChildrenProps> & {
 
     /** The text displays under the first line */
     secondLineText?: string;
+
+    /**
+     * Whether the button should have a background layer in the color of theme.appBG.
+     * This is needed for buttons that allow content to display under them.
+     */
+    shouldBlendOpacity?: boolean;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
@@ -255,6 +261,7 @@ function Button(
         isPressOnEnterActive,
         isNested = false,
         secondLineText = '',
+        shouldBlendOpacity = false,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
@@ -356,6 +363,57 @@ function Button(
         return textComponent;
     };
 
+    const buttonStyles = useMemo<StyleProp<ViewStyle>>(
+        () => [
+            styles.button,
+            StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, !!icon, !!(text?.length > 0), shouldShowRightIcon),
+            success ? styles.buttonSuccess : undefined,
+            danger ? styles.buttonDanger : undefined,
+            isDisabled ? styles.buttonOpacityDisabled : undefined,
+            isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
+            shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
+            shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
+            text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
+            innerStyles,
+            link && styles.bgTransparent,
+        ],
+        [
+            StyleUtils,
+            danger,
+            icon,
+            innerStyles,
+            isDisabled,
+            large,
+            link,
+            medium,
+            shouldRemoveLeftBorderRadius,
+            shouldRemoveRightBorderRadius,
+            shouldShowRightIcon,
+            small,
+            styles,
+            success,
+            text,
+        ],
+    );
+
+    const buttonContainerStyles = useMemo<StyleProp<ViewStyle>>(
+        () => [buttonStyles, shouldBlendOpacity && styles.buttonBlendContainer],
+        [buttonStyles, shouldBlendOpacity, styles.buttonBlendContainer],
+    );
+
+    const buttonBlendForegroundStyle = useMemo<StyleProp<ViewStyle>>(() => {
+        if (!shouldBlendOpacity) {
+            return undefined;
+        }
+
+        const {backgroundColor, opacity} = StyleSheet.flatten(buttonStyles);
+
+        return {
+            backgroundColor,
+            opacity,
+        };
+    }, [buttonStyles, shouldBlendOpacity]);
+
     return (
         <>
             {pressOnEnter && (
@@ -402,6 +460,7 @@ function Button(
                 onPressIn={onPressIn}
                 onPressOut={onPressOut}
                 onMouseDown={onMouseDown}
+                shouldBlendOpacity={shouldBlendOpacity}
                 disabled={isLoading || isDisabled}
                 wrapperStyle={[
                     isDisabled ? {...styles.cursorDisabled, ...styles.noSelect} : {},
@@ -410,19 +469,7 @@ function Button(
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                     style,
                 ]}
-                style={[
-                    styles.button,
-                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, !!icon, !!(text?.length > 0), shouldShowRightIcon),
-                    success ? styles.buttonSuccess : undefined,
-                    danger ? styles.buttonDanger : undefined,
-                    isDisabled ? styles.buttonOpacityDisabled : undefined,
-                    isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
-                    shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
-                    shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                    text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
-                    innerStyles,
-                    link && styles.bgTransparent,
-                ]}
+                style={buttonContainerStyles}
                 isNested={isNested}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -439,6 +486,7 @@ function Button(
                 onHoverIn={() => setIsHovered(true)}
                 onHoverOut={() => setIsHovered(false)}
             >
+                {shouldBlendOpacity && <View style={[StyleSheet.absoluteFill, buttonBlendForegroundStyle]} />}
                 {renderContent()}
                 {isLoading && (
                     <ActivityIndicator

src/components/CurrencySelectionList/index.tsx

@@ -18,6 +18,7 @@ function CurrencySelectionList({
     canSelectMultiple = false,
     recentlyUsedCurrencies,
     excludedCurrencies = [],
+    ...restProps
 }: CurrencySelectionListProps) {
     const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
     const [searchValue, setSearchValue] = useState('');
@@ -91,6 +92,8 @@ function CurrencySelectionList({
 
     return (
         <SelectionList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
             sections={sections}
             ListItem={canSelectMultiple ? SelectableListItem : RadioListItem}
             textInputLabel={searchInputLabel}

src/components/CurrencySelectionList/types.ts

@@ -1,11 +1,11 @@
-import type {ListItem} from '@components/SelectionList/types';
+import type {ListItem, SelectionListProps} from '@components/SelectionList/types';
 
 type CurrencyListItem = ListItem & {
     currencyName: string;
     currencyCode: string;
 };
 
-type CurrencySelectionListProps = {
+type CurrencySelectionListProps = Partial<SelectionListProps<CurrencyListItem>> & {
     /** Label for the search text input */
     searchInputLabel: string;
 

src/components/EmptyStateComponent/index.tsx

@@ -29,6 +29,7 @@ function EmptyStateComponent({
     lottieWebViewStyles,
     showsVerticalScrollIndicator,
     minModalHeight = 400,
+    addBottomSafeAreaPadding = false,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
@@ -88,6 +89,7 @@ function EmptyStateComponent({
             showsVerticalScrollIndicator={showsVerticalScrollIndicator}
             contentContainerStyle={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]}
             style={styles.flex1}
+            addBottomSafeAreaPadding={addBottomSafeAreaPadding}
         >
             <View style={[styles.skeletonBackground, styles.overflowHidden]}>
                 <SkeletonComponent

src/components/EmptyStateComponent/types.ts

@@ -25,6 +25,9 @@ type SharedProps<T> = {
     lottieWebViewStyles?: React.CSSProperties | undefined;
     minModalHeight?: number;
     showsVerticalScrollIndicator?: boolean;
+
+    /** Whether to add bottom safe area padding to the view. */
+    addBottomSafeAreaPadding?: boolean;
 };
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {