From 537cd202da087d667e5078f3af48d976e7eb519f Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 15:11:36 +0100
Subject: [PATCH 01/19] fix: extract `stickToBottom` style to global stylesheet

---
 src/components/FixedFooter.tsx                 | 4 ++--
 src/components/Form/FormWrapper.tsx            | 5 ++---
 src/components/NavigationBar/index.android.tsx | 6 +++---
 src/styles/index.ts                            | 7 +++++++
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index fe9179fa88b4d..8f167059a2518 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -29,7 +29,7 @@ function FixedFooter({style, children, addBottomSafeAreaPadding = false, shouldS
         // If the footer should stick to the bottom, we use absolute positioning instead of flex.
         // In this case, we need to use style.bottom instead of style.paddingBottom.
         if (shouldStickToBottom) {
-            return {position: 'absolute', left: 0, right: 0, bottom: addBottomSafeAreaPadding ? totalPaddingBottom : styles.pb5.paddingBottom};
+            return [styles.stickToBottom, {bottom: addBottomSafeAreaPadding ? totalPaddingBottom : styles.pb5.paddingBottom}];
         }
 
         // If the footer should not stick to the bottom, we use flex and add the safe area padding in styles.paddingBottom.
@@ -39,7 +39,7 @@ function FixedFooter({style, children, addBottomSafeAreaPadding = false, shouldS
 
         // Otherwise, we just use the default bottom padding.
         return styles.pb5;
-    }, [addBottomSafeAreaPadding, paddingBottom, shouldStickToBottom, styles.pb5]);
+    }, [addBottomSafeAreaPadding, paddingBottom, shouldStickToBottom, styles.pb5, styles.stickToBottom]);
 
     if (!children) {
         return null;
diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index dfafa05b53b29..f5388712d41a3 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -130,10 +130,8 @@ function FormWrapper({
                         submitButtonStyles,
                         shouldSubmitButtonStickToBottom
                             ? [
+                                  styles.stickToBottom,
                                   {
-                                      position: 'absolute',
-                                      left: 0,
-                                      right: 0,
                                       bottom: styles.pb5.paddingBottom + paddingBottom,
                                   },
                                   style,
@@ -169,6 +167,7 @@ function FormWrapper({
             styles.mh0,
             styles.mt5,
             styles.pb5.paddingBottom,
+            styles.stickToBottom,
             submitButtonStyles,
             submitButtonText,
             submitFlexEnabled,
diff --git a/src/components/NavigationBar/index.android.tsx b/src/components/NavigationBar/index.android.tsx
index a7e8fe9ccd073..d34b28593d6fa 100644
--- a/src/components/NavigationBar/index.android.tsx
+++ b/src/components/NavigationBar/index.android.tsx
@@ -2,12 +2,12 @@ import {useMemo} from 'react';
 import {View} from 'react-native';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
+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 theme = useTheme();
+    const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {insets} = useSafeAreaPaddings();
 
@@ -15,7 +15,7 @@ function NavigationBar() {
 
     const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
 
-    return isSoftKeyNavigation ? <View style={[{position: 'absolute', bottom: 0, left: 0, right: 0, height: insets.bottom, backgroundColor: theme.navigationBarBackgroundColor}]} /> : null;
+    return isSoftKeyNavigation ? <View style={[styles.navigationBarBG, styles.stickToBottom, {height: insets.bottom}]} /> : null;
 }
 NavigationBar.displayName = 'NavigationBar';
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6650743c56595..b977ad3e1cae8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5498,6 +5498,13 @@ const styles = (theme: ThemeColors) =>
         expenseWidgetRadius: {
             borderRadius: variables.componentBorderRadiusNormal,
         },
+
+        stickToBottom: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;

From 300abcf1ce72e9e3b0fa3667545513432572b245 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 15:13:43 +0100
Subject: [PATCH 02/19] fix: make offline indicator translucent on edge-to-edge
 mode

---
 src/components/OfflineIndicator.tsx | 11 +++++++----
 src/components/ScreenWrapper.tsx    |  6 +++++-
 src/styles/index.ts                 |  4 ++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index 5b6a28156dc2b..bee9b3e628130 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -21,18 +21,21 @@ 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, addBottomSafeAreaPadding = false}: OfflineIndicatorProps) {
+function OfflineIndicator({style, containerStyles: containerStylesProp, addBottomSafeAreaPadding = false, isTranslucent = false}: OfflineIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const computedStyles = useBottomSafeSafeAreaPaddingStyle({
+    const containerStyles = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding,
-        style: containerStyles ?? (shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator),
+        style: containerStylesProp ?? (shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator),
     });
 
     if (!isOffline) {
@@ -40,7 +43,7 @@ function OfflineIndicator({style, containerStyles, addBottomSafeAreaPadding = fa
     }
 
     return (
-        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, style]}>
+        <View style={[containerStyles, isTranslucent && styles.navigationBarBG, styles.flexRow, styles.alignItemsCenter, style]}>
             <Icon
                 fill={theme.icon}
                 src={Expensicons.OfflineCloud}
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 6ea4ca3951aee..4f0073efa9000 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -128,6 +128,9 @@ type ScreenWrapperProps = {
      * The KeyboardAvoidingView will use a negative keyboardVerticalOffset.
      */
     shouldKeyboardOffsetBottomSafeAreaPadding?: boolean;
+
+    /** Whether the offline indicator should be translucent. */
+    isOfflineIndicatorTranslucent?: boolean;
 };
 
 type ScreenWrapperStatusContextType = {
@@ -163,6 +166,7 @@ function ScreenWrapper(
         bottomContent,
         enableEdgeToEdgeBottomSafeAreaPadding = false,
         shouldKeyboardOffsetBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding,
+        isOfflineIndicatorTranslucent = enableEdgeToEdgeBottomSafeAreaPadding,
     }: ScreenWrapperProps,
     ref: ForwardedRef<View>,
 ) {
@@ -371,7 +375,7 @@ function ScreenWrapper(
                                     <>
                                         <OfflineIndicator
                                             style={[offlineIndicatorStyle]}
-                                            containerStyles={styles.offlineIndicatorMobile}
+                                            isTranslucent={isOfflineIndicatorTranslucent}
                                             addBottomSafeAreaPadding={addMobileOfflineIndicatorBottomSafeAreaPadding}
                                         />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b977ad3e1cae8..a6e49de8ede98 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5499,6 +5499,10 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.componentBorderRadiusNormal,
         },
 
+        navigationBarBG: {
+            backgroundColor: theme.navigationBarBackgroundColor,
+        },
+
         stickToBottom: {
             position: 'absolute',
             bottom: 0,

From 0e81308d857f16a88d9cb714c55aeb406ee3d81b Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 15:45:24 +0100
Subject: [PATCH 03/19] fix: make OfflineIndicator bottom sticky

---
 src/components/ScreenWrapper.tsx | 14 +++++++++++++-
 src/styles/utils/index.ts        | 10 ++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 4f0073efa9000..be951b5c548da 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -12,6 +12,7 @@ import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -195,6 +196,7 @@ function ScreenWrapper(
     const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {initialHeight} = useInitialDimensions();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {isDevelopment} = useEnvironment();
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
@@ -319,14 +321,23 @@ function ScreenWrapper(
             paddingBottom: includeSafeAreaPaddingBottom ? paddingBottom : undefined,
         };
     }, [ignoreInsetsConsumption, includeSafeAreaPaddingBottom, paddingBottom, unmodifiedPaddings.bottom]);
+
     const bottomContentStyle = useMemo(
         () => (enableEdgeToEdgeBottomSafeAreaPadding ? edgeToEdgeBottomContentStyle : legacyBottomContentStyle),
         [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle],
     );
 
-    const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : !includeSafeAreaPaddingBottom;
+    const shouldUseStickyMobileOfflineIndicator = enableEdgeToEdgeBottomSafeAreaPadding && !bottomContent;
+    const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !shouldUseStickyMobileOfflineIndicator : !includeSafeAreaPaddingBottom;
     const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
 
+    const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
+    const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
+    const mobileOfflineIndicatorContainerStyle = useMemo(
+        () => (shouldUseStickyMobileOfflineIndicator ? StyleUtils.getEdgeToEdgeMobileOfflineIndicatorStyle(isSoftKeyNavigation, paddingBottom) : styles.offlineIndicatorMobile),
+        [StyleUtils, shouldUseStickyMobileOfflineIndicator, paddingBottom, styles.offlineIndicatorMobile, isSoftKeyNavigation],
+    );
+
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
     const contextValue = useMemo(
         () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}),
@@ -374,6 +385,7 @@ function ScreenWrapper(
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
                                     <>
                                         <OfflineIndicator
+                                            containerStyles={mobileOfflineIndicatorContainerStyle}
                                             style={[offlineIndicatorStyle]}
                                             isTranslucent={isOfflineIndicatorTranslucent}
                                             addBottomSafeAreaPadding={addMobileOfflineIndicatorBottomSafeAreaPadding}
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index b6ee3085d9814..a1d1f52d115cf 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1765,6 +1765,16 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [],
         {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
     ],
+
+    getEdgeToEdgeMobileOfflineIndicatorStyle: (isSoftKeyNavigation: boolean, paddingBottom: number): StyleProp<ViewStyle> => ({
+        position: 'absolute',
+        bottom: isSoftKeyNavigation ? paddingBottom : 0,
+        left: 0,
+        right: 0,
+        paddingHorizontal: 20,
+        paddingTop: 5,
+        paddingBottom: isSoftKeyNavigation ? 5 : paddingBottom + 5,
+    }),
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;

From e88ee6fc4b26c8083053a46a2ef968054e74e87d Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 15:45:41 +0100
Subject: [PATCH 04/19] fix: use bottom safe area padding for navigation bar
 height instead of inset

---
 src/components/NavigationBar/index.android.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/NavigationBar/index.android.tsx b/src/components/NavigationBar/index.android.tsx
index d34b28593d6fa..3f066b806a384 100644
--- a/src/components/NavigationBar/index.android.tsx
+++ b/src/components/NavigationBar/index.android.tsx
@@ -9,13 +9,12 @@ import CONST from '@src/CONST';
 function NavigationBar() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {insets} = useSafeAreaPaddings();
+    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.navigationBarBG, styles.stickToBottom, {height: insets.bottom}]} /> : null;
+    return isSoftKeyNavigation ? <View style={[styles.navigationBarBG, styles.stickToBottom, {height: paddingBottom}]} /> : null;
 }
 NavigationBar.displayName = 'NavigationBar';
 

From 9eb3b3e8c8839fb75f3d86e2afb28c657302fb72 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 16:13:15 +0100
Subject: [PATCH 05/19] feat: add more customization to
 `useBottomSafeSafeAreaPaddingStyle`

---
 .../useBottomSafeSafeAreaPaddingStyle.ts      | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
index de56f88d8ec0c..00004b8393847 100644
--- a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
+++ b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
@@ -1,6 +1,7 @@
 import {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
+import useNetwork from './useNetwork';
 import useSafeAreaPaddings from './useSafeAreaPaddings';
 
 /** The parameters for the useBottomSafeSafeAreaPaddingStyle hook. */
@@ -8,9 +9,14 @@ type UseBottomSafeAreaPaddingStyleParams = {
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
 
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
+
     /** The style to adapt and add bottom safe area padding to. */
     style?: StyleProp<ViewStyle>;
 
+    styleProperty?: 'paddingBottom' | 'bottom';
+
     /** The additional padding to add to the bottom of the content. */
     additionalPaddingBottom?: number;
 };
@@ -23,17 +29,22 @@ type UseBottomSafeAreaPaddingStyleParams = {
  */
 function useBottomSafeSafeAreaPaddingStyle(params?: UseBottomSafeAreaPaddingStyleParams) {
     const {paddingBottom: safeAreaPaddingBottom} = useSafeAreaPaddings(true);
+    const {isOffline} = useNetwork();
 
-    const {addBottomSafeAreaPadding, style, additionalPaddingBottom} = params ?? {};
+    const {addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style, styleProperty = 'paddingBottom', additionalPaddingBottom = 0} = params ?? {};
 
     return useMemo<StyleProp<ViewStyle>>(() => {
-        let totalPaddingBottom: number | string = additionalPaddingBottom ?? 0;
+        let totalPaddingBottom: number | string = additionalPaddingBottom;
 
         // Add the safe area padding to the total padding if the flag is enabled
         if (addBottomSafeAreaPadding) {
             totalPaddingBottom += safeAreaPaddingBottom;
         }
 
+        if (addOfflineIndicatorBottomSafeAreaPadding && isOffline) {
+            totalPaddingBottom += safeAreaPaddingBottom;
+        }
+
         // If there is no bottom safe area or additional padding, return the style as is
         if (totalPaddingBottom === 0) {
             return style;
@@ -52,12 +63,13 @@ function useBottomSafeSafeAreaPaddingStyle(params?: UseBottomSafeAreaPaddingStyl
                 return style;
             }
 
-            return [style, {paddingBottom: totalPaddingBottom}];
+            // The user of this hook can decide which style property to use for applying the padding.
+            return [style, {[styleProperty]: totalPaddingBottom}];
         }
 
         // If no style is provided, return the padding as an object
         return {paddingBottom: totalPaddingBottom};
-    }, [addBottomSafeAreaPadding, style, additionalPaddingBottom, safeAreaPaddingBottom]);
+    }, [additionalPaddingBottom, addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, isOffline, style, safeAreaPaddingBottom, styleProperty]);
 }
 
 export default useBottomSafeSafeAreaPaddingStyle;

From 819e2027a1ba6c059398a3ce9785a71135f5ef95 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 16:13:33 +0100
Subject: [PATCH 06/19] refactor: use `useBottomSafeSafeAreaPaddingStyle`
 instead of custom logic

---
 src/components/FixedFooter.tsx | 36 +++++++++++++++-------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 8f167059a2518..1b31c3ee25494 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -2,7 +2,7 @@ import type {ReactNode} from 'react';
 import React, {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
+import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 type FixedFooterProps = {
@@ -15,31 +15,27 @@ type FixedFooterProps = {
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
 
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
+
     /** Whether to stick the footer to the bottom of the screen. */
     shouldStickToBottom?: boolean;
 };
 
-function FixedFooter({style, children, addBottomSafeAreaPadding = false, shouldStickToBottom = false}: FixedFooterProps) {
+function FixedFooter({style, children, addBottomSafeAreaPadding = false, addOfflineIndicatorBottomSafeAreaPadding = false, shouldStickToBottom = false}: FixedFooterProps) {
     const styles = useThemeStyles();
-    const {paddingBottom} = useSafeAreaPaddings(true);
-
-    const footerStyle = useMemo<StyleProp<ViewStyle>>(() => {
-        const totalPaddingBottom = styles.pb5.paddingBottom + paddingBottom;
-
-        // If the footer should stick to the bottom, we use absolute positioning instead of flex.
-        // In this case, we need to use style.bottom instead of style.paddingBottom.
-        if (shouldStickToBottom) {
-            return [styles.stickToBottom, {bottom: addBottomSafeAreaPadding ? totalPaddingBottom : styles.pb5.paddingBottom}];
-        }
-
-        // If the footer should not stick to the bottom, we use flex and add the safe area padding in styles.paddingBottom.
-        if (addBottomSafeAreaPadding) {
-            return {paddingBottom: totalPaddingBottom};
-        }
 
-        // Otherwise, we just use the default bottom padding.
-        return styles.pb5;
-    }, [addBottomSafeAreaPadding, paddingBottom, shouldStickToBottom, styles.pb5, styles.stickToBottom]);
+    const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({
+        addBottomSafeAreaPadding,
+        addOfflineIndicatorBottomSafeAreaPadding,
+        additionalPaddingBottom: styles.pb5.paddingBottom,
+        styleProperty: shouldStickToBottom ? 'bottom' : 'paddingBottom',
+    });
+
+    const footerStyle = useMemo<StyleProp<ViewStyle>>(
+        () => [shouldStickToBottom && styles.stickToBottom, bottomSafeAreaPaddingStyle],
+        [bottomSafeAreaPaddingStyle, shouldStickToBottom, styles.stickToBottom],
+    );
 
     if (!children) {
         return null;

From 4bdb45801517751830d3b1034678a2095d070b87 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 16:14:05 +0100
Subject: [PATCH 07/19] feat: add additional prop for applying extra offline
 indicator padding

---
 src/components/BlockingViews/BlockingView.tsx  |  6 +++++-
 .../BlockingViews/FullPageNotFoundView.tsx     |  5 +++++
 .../FullPageOfflineBlockingView.tsx            |  6 +++++-
 src/components/EmptyStateComponent/index.tsx   |  2 ++
 src/components/EmptyStateComponent/types.ts    |  3 +++
 src/components/Form/FormProvider.tsx           |  3 +++
 src/components/Form/FormWrapper.tsx            |  6 ++++++
 src/components/OfflineIndicator.tsx            | 12 +++++++++++-
 src/components/ScrollView.tsx                  | 18 ++++++++++++++++--
 src/components/SectionList/BaseSectionList.tsx |  4 ++--
 src/components/SectionList/types.ts            |  3 +++
 .../SelectionList/BaseSelectionList.tsx        | 14 +++++---------
 src/components/SelectionList/types.ts          |  3 +++
 13 files changed, 69 insertions(+), 16 deletions(-)

diff --git a/src/components/BlockingViews/BlockingView.tsx b/src/components/BlockingViews/BlockingView.tsx
index 6fc43cd9b236e..f1404013c6083 100644
--- a/src/components/BlockingViews/BlockingView.tsx
+++ b/src/components/BlockingViews/BlockingView.tsx
@@ -51,6 +51,9 @@ type BaseBlockingViewProps = {
 
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
 type BlockingViewIconProps = {
@@ -100,6 +103,7 @@ function BlockingView({
     contentFitImage,
     containerStyle: containerStyleProp,
     addBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = false,
 }: BlockingViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -137,7 +141,7 @@ function BlockingView({
         );
     }, [styles, subtitleText, shouldEmbedLinkWithSubtitle, CustomSubtitle]);
 
-    const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: containerStyleProp});
+    const containerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: containerStyleProp});
 
     return (
         <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph10, containerStyle]}>
diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx
index b9afe868878cc..6c6a0b0a09c26 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.tsx
+++ b/src/components/BlockingViews/FullPageNotFoundView.tsx
@@ -53,6 +53,9 @@ type FullPageNotFoundViewProps = {
 
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables
@@ -71,6 +74,7 @@ function FullPageNotFoundView({
     subtitleStyle,
     shouldDisplaySearchRouter,
     addBottomSafeAreaPadding = true,
+    addOfflineIndicatorBottomSafeAreaPadding = false,
 }: FullPageNotFoundViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -98,6 +102,7 @@ function FullPageNotFoundView({
                         onLinkPress={onLinkPress}
                         subtitleStyle={subtitleStyle}
                         addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                        addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
                     />
                 </View>
             </ForceFullScreenView>
diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
index dc5c210b3178a..5bfb08a88adc3 100644
--- a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
+++ b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
@@ -9,9 +9,12 @@ import BlockingView from './BlockingView';
 type FullPageOfflineBlockingViewProps = ChildrenProps & {
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
-function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true}: FullPageOfflineBlockingViewProps) {
+function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true, addOfflineIndicatorBottomSafeAreaPadding = false}: FullPageOfflineBlockingViewProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -25,6 +28,7 @@ function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true}
                 title={translate('common.youAppearToBeOffline')}
                 subtitle={translate('common.thisFeatureRequiresInternet')}
                 addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
             />
         );
     }
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index d3a715ad87487..93d0926b8043b 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -30,6 +30,7 @@ function EmptyStateComponent({
     showsVerticalScrollIndicator,
     minModalHeight = 400,
     addBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = false,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
@@ -90,6 +91,7 @@ function EmptyStateComponent({
             contentContainerStyle={[{minHeight: minModalHeight}, styles.flexGrow1, styles.flexShrink0, containerStyles]}
             style={styles.flex1}
             addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+            addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
         >
             <View style={[styles.skeletonBackground, styles.overflowHidden]}>
                 <SkeletonComponent
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index a5eedd0878d37..39ddcde50abff 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -28,6 +28,9 @@ type SharedProps<T> = {
 
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx
index 6c8d3f989e166..5145bd9754e68 100644
--- a/src/components/Form/FormProvider.tsx
+++ b/src/components/Form/FormProvider.tsx
@@ -79,6 +79,9 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
 
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
+
     /** Whether the submit button should stick to the bottom of the screen. */
     shouldSubmitButtonStickToBottom?: boolean;
 };
diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index f5388712d41a3..9df54f0c1ae53 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -43,6 +43,9 @@ type FormWrapperProps = ChildrenProps &
         /** If enabled, the content will have a bottom padding equal to account for the safe bottom area inset. */
         addBottomSafeAreaPadding?: boolean;
 
+        /** Whether to add bottom safe area padding to the content. */
+        addOfflineIndicatorBottomSafeAreaPadding?: boolean;
+
         /** Whether the submit button should stick to the bottom of the screen. */
         shouldSubmitButtonStickToBottom?: boolean;
     };
@@ -69,6 +72,7 @@ function FormWrapper({
     isLoading = false,
     shouldScrollToEnd = false,
     addBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = false,
     shouldSubmitButtonStickToBottom = false,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
@@ -220,6 +224,7 @@ function FormWrapper({
                     contentContainerStyle={styles.flexGrow1}
                     keyboardShouldPersistTaps="handled"
                     addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                    addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
                     ref={formRef}
                 >
                     {scrollViewContent()}
@@ -230,6 +235,7 @@ function FormWrapper({
                     contentContainerStyle={styles.flexGrow1}
                     keyboardShouldPersistTaps="handled"
                     addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                    addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
                     ref={formRef}
                 >
                     {scrollViewContent()}
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index bee9b3e628130..9ada3c1e1bcc3 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -22,11 +22,20 @@ type OfflineIndicatorProps = {
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
 
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: 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,
+    addOfflineIndicatorBottomSafeAreaPadding = false,
+    isTranslucent = false,
+}: OfflineIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -35,6 +44,7 @@ function OfflineIndicator({style, containerStyles: containerStylesProp, addBotto
 
     const containerStyles = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding,
+        addOfflineIndicatorBottomSafeAreaPadding,
         style: containerStylesProp ?? (shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator),
     });
 
diff --git a/src/components/ScrollView.tsx b/src/components/ScrollView.tsx
index 8a2a4519e0d4f..f1a11cf9499b2 100644
--- a/src/components/ScrollView.tsx
+++ b/src/components/ScrollView.tsx
@@ -8,13 +8,27 @@ import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddi
 type ScrollViewProps = RNScrollViewProps & {
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
 function ScrollView(
-    {children, scrollIndicatorInsets, contentContainerStyle: contentContainerStyleProp, addBottomSafeAreaPadding = false, ...props}: ScrollViewProps,
+    {
+        children,
+        scrollIndicatorInsets,
+        contentContainerStyle: contentContainerStyleProp,
+        addBottomSafeAreaPadding = false,
+        addOfflineIndicatorBottomSafeAreaPadding = false,
+        ...props
+    }: ScrollViewProps,
     ref: ForwardedRef<RNScrollView>,
 ) {
-    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: contentContainerStyleProp});
+    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
+        addBottomSafeAreaPadding,
+        addOfflineIndicatorBottomSafeAreaPadding,
+        style: contentContainerStyleProp,
+    });
 
     return (
         <RNScrollView
diff --git a/src/components/SectionList/BaseSectionList.tsx b/src/components/SectionList/BaseSectionList.tsx
index dc40211030b4f..1474c5493eaff 100644
--- a/src/components/SectionList/BaseSectionList.tsx
+++ b/src/components/SectionList/BaseSectionList.tsx
@@ -4,10 +4,10 @@ import AnimatedSectionList from './AnimatedSectionList';
 import type {SectionListProps, SectionListRef} from './types';
 
 function BaseSectionList<ItemT, SectionT>(
-    {addBottomSafeAreaPadding = false, contentContainerStyle: contentContainerStyleProp, ...restProps}: SectionListProps<ItemT, SectionT>,
+    {addBottomSafeAreaPadding = false, addOfflineIndicatorBottomSafeAreaPadding = false, contentContainerStyle: contentContainerStyleProp, ...restProps}: SectionListProps<ItemT, SectionT>,
     ref: SectionListRef<ItemT, SectionT>,
 ) {
-    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, style: contentContainerStyleProp});
+    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp});
 
     return (
         <AnimatedSectionList
diff --git a/src/components/SectionList/types.ts b/src/components/SectionList/types.ts
index cd9a6d5bf2af1..0c588a5c5adce 100644
--- a/src/components/SectionList/types.ts
+++ b/src/components/SectionList/types.ts
@@ -4,6 +4,9 @@ import type {SectionListProps as RNSectionListProps, SectionList} from 'react-na
 type SectionListProps<ItemT, SectionT> = RNSectionListProps<ItemT, SectionT> & {
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
 type SectionListRef<ItemT, SectionT> = ForwardedRef<SectionList<ItemT, SectionT>>;
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index c1e3818a12e28..3375979a96d87 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -16,7 +16,6 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
-import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
@@ -116,7 +115,7 @@ function BaseSelectionList<TItem extends ListItem>(
         listItemWrapperStyle,
         shouldIgnoreFocus = false,
         scrollEventThrottle,
-        contentContainerStyle: contentContainerStyleProp,
+        contentContainerStyle,
         shouldHighlightSelectedItem = false,
         shouldKeepFocusedItemAtTopOfViewableArea = false,
         shouldDebounceScrolling = false,
@@ -129,6 +128,7 @@ function BaseSelectionList<TItem extends ListItem>(
         isScreenFocused = false,
         shouldSubscribeToArrowKeyEvents = true,
         addBottomSafeAreaPadding = false,
+        addOfflineIndicatorBottomSafeAreaPadding = false,
     }: SelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -831,13 +831,6 @@ function BaseSelectionList<TItem extends ListItem>(
         [footerContent, includeSafeAreaPaddingBottom, isKeyboardShown, safeAreaPaddingBottomStyle],
     );
 
-    // If the default confirm button is visible and it is bottom-sticky,
-    // we need to add additional padding bottom to the content container.
-    const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
-        addBottomSafeAreaPadding: false, // Bottom safe area padding is already applied in the SectionList
-        style: contentContainerStyleProp,
-    });
-
     const shouldHideContentBottomSafeAreaPadding = showConfirmButton || !!footerContent;
 
     // TODO: test _every_ component that uses SelectionList
@@ -900,6 +893,7 @@ function BaseSelectionList<TItem extends ListItem>(
                         onEndReachedThreshold={onEndReachedThreshold}
                         scrollEventThrottle={scrollEventThrottle}
                         addBottomSafeAreaPadding={!shouldHideContentBottomSafeAreaPadding && addBottomSafeAreaPadding}
+                        addOfflineIndicatorBottomSafeAreaPadding={!shouldHideContentBottomSafeAreaPadding && addOfflineIndicatorBottomSafeAreaPadding}
                         contentContainerStyle={contentContainerStyle}
                         CellRendererComponent={shouldPreventActiveCellVirtualization ? FocusAwareCellRendererComponent : undefined}
                     />
@@ -910,6 +904,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 <FixedFooter
                     style={styles.mtAuto}
                     addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                    addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
                 >
                     <Button
                         success={!shouldUseDefaultTheme}
@@ -927,6 +922,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 <FixedFooter
                     style={styles.mtAuto}
                     addBottomSafeAreaPadding={addBottomSafeAreaPadding}
+                    addOfflineIndicatorBottomSafeAreaPadding={addOfflineIndicatorBottomSafeAreaPadding}
                 >
                     {footerContent}
                 </FixedFooter>
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index c409c6a61d38d..f6f3501e24134 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -671,6 +671,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Whether to add bottom safe area padding to the content. */
     addBottomSafeAreaPadding?: boolean;
+
+    /** Whether to add bottom safe area padding to the content. */
+    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

From a8ecc6bc6f918791118047dfb1cd1043c1aae822 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 16:24:36 +0100
Subject: [PATCH 08/19] fix: extract OfflineIndicator properties to variables

---
 src/CONST.ts                                   | 3 +++
 src/hooks/useBottomSafeSafeAreaPaddingStyle.ts | 3 ++-
 src/styles/index.ts                            | 8 ++++----
 src/styles/utils/index.ts                      | 6 +++---
 src/styles/variables.ts                        | 4 ++++
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 5d99022177066..2bf0497b64ba8 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -13,6 +13,7 @@ import type {MileageRate} from './libs/DistanceRequestUtils';
 import BankAccount from './libs/models/BankAccount';
 import {addTrailingForwardSlash} from './libs/Url';
 import SCREENS from './SCREENS';
+import variables from './styles/variables';
 import type PlaidBankAccount from './types/onyx/PlaidBankAccount';
 
 // Creating a default array and object this way because objects ({}) and arrays ([]) are not stable types.
@@ -6841,6 +6842,8 @@ const CONST = {
     SKIPPABLE_COLLECTION_MEMBER_IDS: [String(DEFAULT_NUMBER_ID), '-1', 'undefined', 'null', 'NaN'] as string[],
     SETUP_SPECIALIST_LOGIN: 'Setup Specialist',
     ILLUSTRATION_ASPECT_RATIO: 39 / 22,
+
+    OFFLINE_INDICATOR_HEIGHT: variables.offlineIndicatorHeight + variables.offlineIndicatorVerticalPadding * 2,
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
index 00004b8393847..ff6327b5775b8 100644
--- a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
+++ b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
@@ -1,6 +1,7 @@
 import {useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
+import CONST from '@src/CONST';
 import useNetwork from './useNetwork';
 import useSafeAreaPaddings from './useSafeAreaPaddings';
 
@@ -42,7 +43,7 @@ function useBottomSafeSafeAreaPaddingStyle(params?: UseBottomSafeAreaPaddingStyl
         }
 
         if (addOfflineIndicatorBottomSafeAreaPadding && isOffline) {
-            totalPaddingBottom += safeAreaPaddingBottom;
+            totalPaddingBottom += CONST.OFFLINE_INDICATOR_HEIGHT;
         }
 
         // If there is no bottom safe area or additional padding, return the style as is
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a6e49de8ede98..0799f1fd73a09 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1153,14 +1153,14 @@ const styles = (theme: ThemeColors) =>
         },
 
         offlineIndicatorMobile: {
-            paddingLeft: 20,
-            paddingTop: 5,
-            paddingBottom: 30,
+            paddingLeft: variables.offlineIndicatorHorizontalPadding,
+            paddingTop: variables.offlineIndicatorVerticalPadding,
+            paddingBottom: variables.offlineIndicatorVerticalPadding + 25,
             marginBottom: -25,
         },
 
         offlineIndicatorRow: {
-            height: 25,
+            height: variables.offlineIndicatorHeight,
         },
 
         deletedAttachmentIndicator: {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index a1d1f52d115cf..fac5d6677b4b1 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1771,9 +1771,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         bottom: isSoftKeyNavigation ? paddingBottom : 0,
         left: 0,
         right: 0,
-        paddingHorizontal: 20,
-        paddingTop: 5,
-        paddingBottom: isSoftKeyNavigation ? 5 : paddingBottom + 5,
+        paddingHorizontal: variables.offlineIndicatorHorizontalPadding,
+        paddingTop: variables.offlineIndicatorVerticalPadding,
+        paddingBottom: isSoftKeyNavigation ? variables.offlineIndicatorVerticalPadding : paddingBottom + variables.offlineIndicatorVerticalPadding,
     }),
 });
 
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 2b39f2320b91f..2e219b84f3a37 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -286,6 +286,10 @@ export default {
     searchTopBarHeight: 52,
     searchRouterInputMargin: 52,
 
+    offlineIndicatorHeight: 25,
+    offlineIndicatorHorizontalPadding: 20,
+    offlineIndicatorVerticalPadding: 5,
+
     h20: 20,
     h28: 28,
     h36: 36,

From 87537e5467807830e977cc555d2df43a53f90da8 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 16:51:27 +0100
Subject: [PATCH 09/19] fix: simplify offlineindicator styles

---
 src/components/OfflineIndicator.tsx    |  2 +-
 src/components/ScreenWrapper.tsx       |  8 ++++----
 src/pages/home/report/ReportFooter.tsx |  2 +-
 src/styles/index.ts                    | 11 ++---------
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index 9ada3c1e1bcc3..577ed95bbdde3 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -45,7 +45,7 @@ function OfflineIndicator({
     const containerStyles = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding,
         addOfflineIndicatorBottomSafeAreaPadding,
-        style: containerStylesProp ?? (shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator),
+        style: containerStylesProp ?? [styles.offlineIndicatorContainer, !shouldUseNarrowLayout && styles.offlineIndicatorLeftSpacing],
     });
 
     if (!isOffline) {
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index be951b5c548da..cbe9be2d843c2 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -327,12 +327,12 @@ function ScreenWrapper(
         [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle],
     );
 
-    const shouldUseStickyMobileOfflineIndicator = enableEdgeToEdgeBottomSafeAreaPadding && !bottomContent;
-    const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !shouldUseStickyMobileOfflineIndicator : !includeSafeAreaPaddingBottom;
+    const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : !includeSafeAreaPaddingBottom;
     const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
 
     const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
     const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
+    const shouldUseStickyMobileOfflineIndicator = enableEdgeToEdgeBottomSafeAreaPadding && !bottomContent;
     const mobileOfflineIndicatorContainerStyle = useMemo(
         () => (shouldUseStickyMobileOfflineIndicator ? StyleUtils.getEdgeToEdgeMobileOfflineIndicatorStyle(isSoftKeyNavigation, paddingBottom) : styles.offlineIndicatorMobile),
         [StyleUtils, shouldUseStickyMobileOfflineIndicator, paddingBottom, styles.offlineIndicatorMobile, isSoftKeyNavigation],
@@ -386,7 +386,7 @@ function ScreenWrapper(
                                     <>
                                         <OfflineIndicator
                                             containerStyles={mobileOfflineIndicatorContainerStyle}
-                                            style={[offlineIndicatorStyle]}
+                                            style={[styles.pl5, styles.offlineIndicatorContainer, offlineIndicatorStyle]}
                                             isTranslucent={isOfflineIndicatorTranslucent}
                                             addBottomSafeAreaPadding={addMobileOfflineIndicatorBottomSafeAreaPadding}
                                         />
@@ -398,7 +398,7 @@ function ScreenWrapper(
                                     <>
                                         <OfflineIndicator
                                             containerStyles={[]}
-                                            style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
+                                            style={[styles.pl5, styles.offlineIndicatorContainer, offlineIndicatorStyle]}
                                             addBottomSafeAreaPadding={addWidescreenOfflineIndicatorBottomSafeAreaPadding}
                                         />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx
index a11d2052a0d9a..f804215234414 100644
--- a/src/pages/home/report/ReportFooter.tsx
+++ b/src/pages/home/report/ReportFooter.tsx
@@ -211,7 +211,7 @@ function ReportFooter({
                         />
                     )}
                     {!shouldUseNarrowLayout && (
-                        <View style={styles.offlineIndicatorRow}>{shouldHideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>
+                        <View style={styles.offlineIndicatorContainer}>{shouldHideComposer && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}</View>
                     )}
                 </View>
             )}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 0799f1fd73a09..90a3ff3ec1dc4 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1148,18 +1148,11 @@ const styles = (theme: ThemeColors) =>
             marginLeft: variables.chatInputSpacing,
         },
 
-        offlineIndicator: {
+        offlineIndicatorLeftSpacing: {
             marginLeft: variables.chatInputSpacing,
         },
 
-        offlineIndicatorMobile: {
-            paddingLeft: variables.offlineIndicatorHorizontalPadding,
-            paddingTop: variables.offlineIndicatorVerticalPadding,
-            paddingBottom: variables.offlineIndicatorVerticalPadding + 25,
-            marginBottom: -25,
-        },
-
-        offlineIndicatorRow: {
+        offlineIndicatorContainer: {
             height: variables.offlineIndicatorHeight,
         },
 

From 06ce141295ff0156b5ff8b57b116bb67a0c0cb12 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 17:26:36 +0100
Subject: [PATCH 10/19] fix: offline indicator on gesture bar

---
 src/components/OfflineIndicator.tsx | 19 ++++---------------
 src/components/ScreenWrapper.tsx    | 27 +++++++++++----------------
 src/styles/index.ts                 |  8 ++++----
 src/styles/utils/index.ts           | 16 +++++++---------
 4 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index 577ed95bbdde3..932243ce4c0c8 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -22,30 +21,20 @@ type OfflineIndicatorProps = {
     /** Whether to add bottom safe area padding to the view. */
     addBottomSafeAreaPadding?: boolean;
 
-    /** Whether to add bottom safe area padding to the content. */
-    addOfflineIndicatorBottomSafeAreaPadding?: boolean;
-
     /** Whether to make the indicator translucent. */
     isTranslucent?: boolean;
 };
 
-function OfflineIndicator({
-    style,
-    containerStyles: containerStylesProp,
-    addBottomSafeAreaPadding = false,
-    addOfflineIndicatorBottomSafeAreaPadding = false,
-    isTranslucent = false,
-}: OfflineIndicatorProps) {
+function OfflineIndicator({style, containerStyles: containerStylesProp, addBottomSafeAreaPadding = false, isTranslucent = false}: OfflineIndicatorProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
+    const fallbackStyle = useMemo(() => [styles.offlineIndicatorContainer, containerStylesProp], [styles.offlineIndicatorContainer, containerStylesProp]);
     const containerStyles = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding,
-        addOfflineIndicatorBottomSafeAreaPadding,
-        style: containerStylesProp ?? [styles.offlineIndicatorContainer, !shouldUseNarrowLayout && styles.offlineIndicatorLeftSpacing],
+        style: fallbackStyle,
     });
 
     if (!isOffline) {
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index cbe9be2d843c2..6b9af99c1b33c 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -10,6 +10,7 @@ import type {EdgeInsets} from 'react-native-safe-area-context';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
+import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -181,6 +182,7 @@ function ScreenWrapper(
     const navigationFallback = useNavigation<PlatformStackNavigationProp<RootNavigatorParamList>>();
     const navigation = navigationProp ?? navigationFallback;
     const isFocused = useIsFocused();
+    const {isOffline} = useNetwork();
     const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight);
     // since Modals are drawn in separate native view hierarchy we should always add paddings
     const ignoreInsetsConsumption = !useContext(ModalContext).default;
@@ -294,6 +296,8 @@ function ScreenWrapper(
     }, []);
 
     const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle, unmodifiedPaddings} = useSafeAreaPaddings(enableEdgeToEdgeBottomSafeAreaPadding);
+    const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
+    const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
 
     const isSafeAreaTopPaddingApplied = includePaddingTop;
     const paddingTopStyle: StyleProp<ViewStyle> = useMemo(() => {
@@ -327,15 +331,12 @@ function ScreenWrapper(
         [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle],
     );
 
-    const addMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : !includeSafeAreaPaddingBottom;
     const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
-
-    const navigationBarType = useMemo(() => StyleUtils.getNavigationBarType(insets), [StyleUtils, insets]);
-    const isSoftKeyNavigation = navigationBarType === CONST.NAVIGATION_BAR_TYPE.SOFT_KEYS;
+    const showTranslucentOfflineIndicator = isOfflineIndicatorTranslucent && !bottomContent && (isSoftKeyNavigation || isOffline);
     const shouldUseStickyMobileOfflineIndicator = enableEdgeToEdgeBottomSafeAreaPadding && !bottomContent;
     const mobileOfflineIndicatorContainerStyle = useMemo(
-        () => (shouldUseStickyMobileOfflineIndicator ? StyleUtils.getEdgeToEdgeMobileOfflineIndicatorStyle(isSoftKeyNavigation, paddingBottom) : styles.offlineIndicatorMobile),
-        [StyleUtils, shouldUseStickyMobileOfflineIndicator, paddingBottom, styles.offlineIndicatorMobile, isSoftKeyNavigation],
+        () => shouldUseStickyMobileOfflineIndicator && StyleUtils.getEdgeToEdgeMobileOfflineIndicatorStyle(isSoftKeyNavigation, paddingBottom),
+        [StyleUtils, shouldUseStickyMobileOfflineIndicator, paddingBottom, isSoftKeyNavigation],
     );
 
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
@@ -383,22 +384,16 @@ function ScreenWrapper(
                                         : children
                                 }
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
-                                    <>
-                                        <OfflineIndicator
-                                            containerStyles={mobileOfflineIndicatorContainerStyle}
-                                            style={[styles.pl5, styles.offlineIndicatorContainer, offlineIndicatorStyle]}
-                                            isTranslucent={isOfflineIndicatorTranslucent}
-                                            addBottomSafeAreaPadding={addMobileOfflineIndicatorBottomSafeAreaPadding}
-                                        />
+                                    <View style={[mobileOfflineIndicatorContainerStyle, showTranslucentOfflineIndicator && styles.navigationBarBG]}>
+                                        <OfflineIndicator style={[styles.pl5, offlineIndicatorStyle]} />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
                                         <ImportedStateIndicator />
-                                    </>
+                                    </View>
                                 )}
                                 {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && (
                                     <>
                                         <OfflineIndicator
-                                            containerStyles={[]}
-                                            style={[styles.pl5, styles.offlineIndicatorContainer, offlineIndicatorStyle]}
+                                            style={[styles.pl5, offlineIndicatorStyle]}
                                             addBottomSafeAreaPadding={addWidescreenOfflineIndicatorBottomSafeAreaPadding}
                                         />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 90a3ff3ec1dc4..545246c010b8d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1148,14 +1148,14 @@ const styles = (theme: ThemeColors) =>
             marginLeft: variables.chatInputSpacing,
         },
 
-        offlineIndicatorLeftSpacing: {
-            marginLeft: variables.chatInputSpacing,
-        },
-
         offlineIndicatorContainer: {
             height: variables.offlineIndicatorHeight,
         },
 
+        offlineIndicatorChat: {
+            marginLeft: variables.chatInputSpacing,
+        },
+
         deletedAttachmentIndicator: {
             zIndex: 20,
             width: '100%',
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index fac5d6677b4b1..96280f261b984 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1766,15 +1766,13 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
     ],
 
-    getEdgeToEdgeMobileOfflineIndicatorStyle: (isSoftKeyNavigation: boolean, paddingBottom: number): StyleProp<ViewStyle> => ({
-        position: 'absolute',
-        bottom: isSoftKeyNavigation ? paddingBottom : 0,
-        left: 0,
-        right: 0,
-        paddingHorizontal: variables.offlineIndicatorHorizontalPadding,
-        paddingTop: variables.offlineIndicatorVerticalPadding,
-        paddingBottom: isSoftKeyNavigation ? variables.offlineIndicatorVerticalPadding : paddingBottom + variables.offlineIndicatorVerticalPadding,
-    }),
+    getEdgeToEdgeMobileOfflineIndicatorStyle: (isSoftKeyNavigation: boolean, paddingBottom: number): StyleProp<ViewStyle> => [
+        styles.stickToBottom,
+        {
+            bottom: isSoftKeyNavigation ? paddingBottom : 0,
+            paddingBottom: isSoftKeyNavigation ? 0 : paddingBottom,
+        },
+    ],
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;

From fd8cbb8bf3c62d9c34d9d6b7e45d169ea9aea26a Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 17:41:35 +0100
Subject: [PATCH 11/19] refactor: remove offline indicator variables

---
 src/CONST.ts            | 3 +--
 src/styles/index.ts     | 8 ++++----
 src/styles/variables.ts | 4 ----
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2bf0497b64ba8..dd9ccbfadfb73 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -13,7 +13,6 @@ import type {MileageRate} from './libs/DistanceRequestUtils';
 import BankAccount from './libs/models/BankAccount';
 import {addTrailingForwardSlash} from './libs/Url';
 import SCREENS from './SCREENS';
-import variables from './styles/variables';
 import type PlaidBankAccount from './types/onyx/PlaidBankAccount';
 
 // Creating a default array and object this way because objects ({}) and arrays ([]) are not stable types.
@@ -6843,7 +6842,7 @@ const CONST = {
     SETUP_SPECIALIST_LOGIN: 'Setup Specialist',
     ILLUSTRATION_ASPECT_RATIO: 39 / 22,
 
-    OFFLINE_INDICATOR_HEIGHT: variables.offlineIndicatorHeight + variables.offlineIndicatorVerticalPadding * 2,
+    OFFLINE_INDICATOR_HEIGHT: 25,
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 545246c010b8d..d3efed5389aeb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1148,14 +1148,14 @@ const styles = (theme: ThemeColors) =>
             marginLeft: variables.chatInputSpacing,
         },
 
-        offlineIndicatorContainer: {
-            height: variables.offlineIndicatorHeight,
-        },
-
         offlineIndicatorChat: {
             marginLeft: variables.chatInputSpacing,
         },
 
+        offlineIndicatorContainer: {
+            height: CONST.OFFLINE_INDICATOR_HEIGHT,
+        },
+
         deletedAttachmentIndicator: {
             zIndex: 20,
             width: '100%',
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 2e219b84f3a37..2b39f2320b91f 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -286,10 +286,6 @@ export default {
     searchTopBarHeight: 52,
     searchRouterInputMargin: 52,
 
-    offlineIndicatorHeight: 25,
-    offlineIndicatorHorizontalPadding: 20,
-    offlineIndicatorVerticalPadding: 5,
-
     h20: 20,
     h28: 28,
     h36: 36,

From 790add17f0a3afe847f2c3b95832125c77e831ef Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Fri, 14 Mar 2025 17:46:30 +0100
Subject: [PATCH 12/19] fix: simplify logic around sticky mobile offline
 indicator

---
 src/components/ScreenWrapper.tsx | 15 ++++++++++++---
 src/styles/utils/index.ts        |  8 --------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 6b9af99c1b33c..0d4916ab711b9 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -131,6 +131,9 @@ type ScreenWrapperProps = {
      */
     shouldKeyboardOffsetBottomSafeAreaPadding?: boolean;
 
+    /** Whether to use a sticky mobile offline indicator. */
+    shouldMobileOfflineIndicatorStickToBottom?: boolean;
+
     /** Whether the offline indicator should be translucent. */
     isOfflineIndicatorTranslucent?: boolean;
 };
@@ -167,6 +170,7 @@ function ScreenWrapper(
         focusTrapSettings,
         bottomContent,
         enableEdgeToEdgeBottomSafeAreaPadding = false,
+        shouldMobileOfflineIndicatorStickToBottom = enableEdgeToEdgeBottomSafeAreaPadding,
         shouldKeyboardOffsetBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding,
         isOfflineIndicatorTranslucent = enableEdgeToEdgeBottomSafeAreaPadding,
     }: ScreenWrapperProps,
@@ -333,10 +337,15 @@ function ScreenWrapper(
 
     const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
     const showTranslucentOfflineIndicator = isOfflineIndicatorTranslucent && !bottomContent && (isSoftKeyNavigation || isOffline);
-    const shouldUseStickyMobileOfflineIndicator = enableEdgeToEdgeBottomSafeAreaPadding && !bottomContent;
+    const displayStickyMobileOfflineIndicator = shouldMobileOfflineIndicatorStickToBottom && !bottomContent;
+
+    const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
+        addBottomSafeAreaPadding: displayStickyMobileOfflineIndicator,
+        styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
+    });
     const mobileOfflineIndicatorContainerStyle = useMemo(
-        () => shouldUseStickyMobileOfflineIndicator && StyleUtils.getEdgeToEdgeMobileOfflineIndicatorStyle(isSoftKeyNavigation, paddingBottom),
-        [StyleUtils, shouldUseStickyMobileOfflineIndicator, paddingBottom, isSoftKeyNavigation],
+        () => displayStickyMobileOfflineIndicator && [styles.stickToBottom, mobileOfflineIndicatorBottomSafeAreaStyle],
+        [displayStickyMobileOfflineIndicator, styles.stickToBottom, mobileOfflineIndicatorBottomSafeAreaStyle],
     );
 
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 96280f261b984..b6ee3085d9814 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1765,14 +1765,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [],
         {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
     ],
-
-    getEdgeToEdgeMobileOfflineIndicatorStyle: (isSoftKeyNavigation: boolean, paddingBottom: number): StyleProp<ViewStyle> => [
-        styles.stickToBottom,
-        {
-            bottom: isSoftKeyNavigation ? paddingBottom : 0,
-            paddingBottom: isSoftKeyNavigation ? 0 : paddingBottom,
-        },
-    ],
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;

From a29f0617cbfe07c3a52e7869d1777f93d31d41c4 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Sat, 15 Mar 2025 12:13:55 +0100
Subject: [PATCH 13/19] fix: allow disabling offline indicator translucency

---
 src/components/ScreenWrapper.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 0d4916ab711b9..b32f3f8f846fb 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -336,8 +336,14 @@ function ScreenWrapper(
     );
 
     const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
-    const showTranslucentOfflineIndicator = isOfflineIndicatorTranslucent && !bottomContent && (isSoftKeyNavigation || isOffline);
     const displayStickyMobileOfflineIndicator = shouldMobileOfflineIndicatorStickToBottom && !bottomContent;
+    const showOfflineIndicatorBackground = !bottomContent && (isSoftKeyNavigation || isOffline);
+    const mobileOfflineIndicatorBackgroundStyle = useMemo(() => {
+        if (!showOfflineIndicatorBackground) {
+            return undefined;
+        }
+        return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;
+    }, [isOfflineIndicatorTranslucent, showOfflineIndicatorBackground, styles.appBG, styles.navigationBarBG]);
 
     const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding: displayStickyMobileOfflineIndicator,
@@ -393,7 +399,7 @@ function ScreenWrapper(
                                         : children
                                 }
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
-                                    <View style={[mobileOfflineIndicatorContainerStyle, showTranslucentOfflineIndicator && styles.navigationBarBG]}>
+                                    <View style={[mobileOfflineIndicatorContainerStyle, mobileOfflineIndicatorBackgroundStyle]}>
                                         <OfflineIndicator style={[styles.pl5, offlineIndicatorStyle]} />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
                                         <ImportedStateIndicator />

From c17f48423d22ba4ab89fff7b770cd6221421cb1c Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Mon, 17 Mar 2025 22:38:44 +0100
Subject: [PATCH 14/19] fix: add missing safe area padding on iOS and fix
 background style

---
 src/components/ScreenWrapper.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index b32f3f8f846fb..40c71c9896ae9 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -335,25 +335,30 @@ function ScreenWrapper(
         [enableEdgeToEdgeBottomSafeAreaPadding, edgeToEdgeBottomContentStyle, legacyBottomContentStyle],
     );
 
-    const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
-    const displayStickyMobileOfflineIndicator = shouldMobileOfflineIndicatorStickToBottom && !bottomContent;
-    const showOfflineIndicatorBackground = !bottomContent && (isSoftKeyNavigation || isOffline);
     const mobileOfflineIndicatorBackgroundStyle = useMemo(() => {
+        const showOfflineIndicatorBackground = !bottomContent && (isSoftKeyNavigation || isOffline);
         if (!showOfflineIndicatorBackground) {
             return undefined;
         }
         return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;
-    }, [isOfflineIndicatorTranslucent, showOfflineIndicatorBackground, styles.appBG, styles.navigationBarBG]);
-
+    }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]);
     const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
-        addBottomSafeAreaPadding: displayStickyMobileOfflineIndicator,
+        addBottomSafeAreaPadding: !bottomContent,
         styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
     });
+
+    const displayStickyMobileOfflineIndicator = shouldMobileOfflineIndicatorStickToBottom && !bottomContent;
     const mobileOfflineIndicatorContainerStyle = useMemo(
-        () => displayStickyMobileOfflineIndicator && [styles.stickToBottom, mobileOfflineIndicatorBottomSafeAreaStyle],
-        [displayStickyMobileOfflineIndicator, styles.stickToBottom, mobileOfflineIndicatorBottomSafeAreaStyle],
+        () => [mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator && styles.stickToBottom, !isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle],
+        [mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator, styles.stickToBottom, isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle],
+    );
+    const mobileOfflineIndicatorStyle = useMemo(
+        () => [styles.pl5, isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle],
+        [isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle, styles.pl5],
     );
 
+    const addWidescreenOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? !bottomContent : true;
+
     const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
     const contextValue = useMemo(
         () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}),
@@ -399,8 +404,8 @@ function ScreenWrapper(
                                         : children
                                 }
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
-                                    <View style={[mobileOfflineIndicatorContainerStyle, mobileOfflineIndicatorBackgroundStyle]}>
-                                        <OfflineIndicator style={[styles.pl5, offlineIndicatorStyle]} />
+                                    <View style={[mobileOfflineIndicatorContainerStyle]}>
+                                        <OfflineIndicator style={mobileOfflineIndicatorStyle} />
                                         {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
                                         <ImportedStateIndicator />
                                     </View>

From ba40cfb39f6295069a22a3f7e8ba622f268fdbb9 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Mon, 17 Mar 2025 22:39:00 +0100
Subject: [PATCH 15/19] fix: add offline indicator content padding by default

---
 src/components/BlockingViews/BlockingView.tsx             | 2 +-
 src/components/BlockingViews/FullPageNotFoundView.tsx     | 2 +-
 .../BlockingViews/FullPageOfflineBlockingView.tsx         | 2 +-
 src/components/EmptyStateComponent/index.tsx              | 2 +-
 src/components/FixedFooter.tsx                            | 8 +++++++-
 src/components/Form/FormWrapper.tsx                       | 2 +-
 src/components/ScrollView.tsx                             | 2 +-
 src/components/SectionList/BaseSectionList.tsx            | 7 ++++++-
 src/components/SelectionList/BaseSelectionList.tsx        | 2 +-
 9 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/BlockingViews/BlockingView.tsx b/src/components/BlockingViews/BlockingView.tsx
index f1404013c6083..01fec5f48bfcf 100644
--- a/src/components/BlockingViews/BlockingView.tsx
+++ b/src/components/BlockingViews/BlockingView.tsx
@@ -103,7 +103,7 @@ function BlockingView({
     contentFitImage,
     containerStyle: containerStyleProp,
     addBottomSafeAreaPadding = false,
-    addOfflineIndicatorBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
 }: BlockingViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx
index 6c6a0b0a09c26..aa09ef2469080 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.tsx
+++ b/src/components/BlockingViews/FullPageNotFoundView.tsx
@@ -74,7 +74,7 @@ function FullPageNotFoundView({
     subtitleStyle,
     shouldDisplaySearchRouter,
     addBottomSafeAreaPadding = true,
-    addOfflineIndicatorBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
 }: FullPageNotFoundViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
diff --git a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
index 5bfb08a88adc3..b110c9e20defb 100644
--- a/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
+++ b/src/components/BlockingViews/FullPageOfflineBlockingView.tsx
@@ -14,7 +14,7 @@ type FullPageOfflineBlockingViewProps = ChildrenProps & {
     addOfflineIndicatorBottomSafeAreaPadding?: boolean;
 };
 
-function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true, addOfflineIndicatorBottomSafeAreaPadding = false}: FullPageOfflineBlockingViewProps) {
+function FullPageOfflineBlockingView({children, addBottomSafeAreaPadding = true, addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding}: FullPageOfflineBlockingViewProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 93d0926b8043b..dac6e9494d8a9 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -30,7 +30,7 @@ function EmptyStateComponent({
     showsVerticalScrollIndicator,
     minModalHeight = 400,
     addBottomSafeAreaPadding = false,
-    addOfflineIndicatorBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 1b31c3ee25494..2a17997324f36 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -22,7 +22,13 @@ type FixedFooterProps = {
     shouldStickToBottom?: boolean;
 };
 
-function FixedFooter({style, children, addBottomSafeAreaPadding = false, addOfflineIndicatorBottomSafeAreaPadding = false, shouldStickToBottom = false}: FixedFooterProps) {
+function FixedFooter({
+    style,
+    children,
+    addBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
+    shouldStickToBottom = false,
+}: FixedFooterProps) {
     const styles = useThemeStyles();
 
     const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({
diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index fb237b19c3aaa..9d7ee21fdb2ed 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -72,7 +72,7 @@ function FormWrapper({
     isLoading = false,
     shouldScrollToEnd = false,
     addBottomSafeAreaPadding = true,
-    addOfflineIndicatorBottomSafeAreaPadding = false,
+    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
     shouldSubmitButtonStickToBottom = false,
 }: FormWrapperProps) {
     const styles = useThemeStyles();
diff --git a/src/components/ScrollView.tsx b/src/components/ScrollView.tsx
index f1a11cf9499b2..e4b2c6703c30d 100644
--- a/src/components/ScrollView.tsx
+++ b/src/components/ScrollView.tsx
@@ -19,7 +19,7 @@ function ScrollView(
         scrollIndicatorInsets,
         contentContainerStyle: contentContainerStyleProp,
         addBottomSafeAreaPadding = false,
-        addOfflineIndicatorBottomSafeAreaPadding = false,
+        addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
         ...props
     }: ScrollViewProps,
     ref: ForwardedRef<RNScrollView>,
diff --git a/src/components/SectionList/BaseSectionList.tsx b/src/components/SectionList/BaseSectionList.tsx
index 1474c5493eaff..18a915d1a58b5 100644
--- a/src/components/SectionList/BaseSectionList.tsx
+++ b/src/components/SectionList/BaseSectionList.tsx
@@ -4,7 +4,12 @@ import AnimatedSectionList from './AnimatedSectionList';
 import type {SectionListProps, SectionListRef} from './types';
 
 function BaseSectionList<ItemT, SectionT>(
-    {addBottomSafeAreaPadding = false, addOfflineIndicatorBottomSafeAreaPadding = false, contentContainerStyle: contentContainerStyleProp, ...restProps}: SectionListProps<ItemT, SectionT>,
+    {
+        addBottomSafeAreaPadding = false,
+        addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
+        contentContainerStyle: contentContainerStyleProp,
+        ...restProps
+    }: SectionListProps<ItemT, SectionT>,
     ref: SectionListRef<ItemT, SectionT>,
 ) {
     const contentContainerStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, style: contentContainerStyleProp});
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 3375979a96d87..e6db53cecd2ff 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -128,7 +128,7 @@ function BaseSelectionList<TItem extends ListItem>(
         isScreenFocused = false,
         shouldSubscribeToArrowKeyEvents = true,
         addBottomSafeAreaPadding = false,
-        addOfflineIndicatorBottomSafeAreaPadding = false,
+        addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
     }: SelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {

From edb1c0a1a1055268d343592a5b3b7f3270773328 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Mon, 17 Mar 2025 23:37:53 +0100
Subject: [PATCH 16/19] Update useBottomSafeSafeAreaPaddingStyle.ts

---
 src/hooks/useBottomSafeSafeAreaPaddingStyle.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
index ff6327b5775b8..d1c004e7bbde9 100644
--- a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
+++ b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
@@ -54,13 +54,13 @@ function useBottomSafeSafeAreaPaddingStyle(params?: UseBottomSafeAreaPaddingStyl
         // If a style is provided, flatten the style and add the padding to it
         if (style) {
             const contentContainerStyleFlattened = StyleSheet.flatten(style);
-            const stylePaddingBottom = contentContainerStyleFlattened?.paddingBottom;
+            const styleBottomSafeAreaPadding = contentContainerStyleFlattened?.[styleProperty];
 
-            if (typeof stylePaddingBottom === 'number') {
-                totalPaddingBottom += stylePaddingBottom;
-            } else if (typeof stylePaddingBottom === 'string') {
-                totalPaddingBottom = `calc(${totalPaddingBottom}px + ${stylePaddingBottom})`;
-            } else if (stylePaddingBottom !== undefined) {
+            if (typeof styleBottomSafeAreaPadding === 'number') {
+                totalPaddingBottom += styleBottomSafeAreaPadding;
+            } else if (typeof styleBottomSafeAreaPadding === 'string') {
+                totalPaddingBottom = `calc(${totalPaddingBottom}px + ${styleBottomSafeAreaPadding})`;
+            } else if (styleBottomSafeAreaPadding !== undefined) {
                 return style;
             }
 

From 273f82025eac0eec7126cf1b06b4229146c7fae2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Tue, 18 Mar 2025 13:15:58 +0100
Subject: [PATCH 17/19] fix: only apply bottom safe area padding if bottom
 content is not applied

---
 src/components/ScreenWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 40c71c9896ae9..96b5c16dd2daf 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -343,7 +343,7 @@ function ScreenWrapper(
         return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;
     }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]);
     const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
-        addBottomSafeAreaPadding: !bottomContent,
+        addBottomSafeAreaPadding: !showBottomContent,
         styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
     });
 

From 622abb9ff8c19929a95166420447f819717d485c Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Tue, 18 Mar 2025 13:39:51 +0100
Subject: [PATCH 18/19] fix: only show offline indicator when offline

---
 src/components/ScreenWrapper.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 96b5c16dd2daf..29e2b9b461cd8 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -343,7 +343,7 @@ function ScreenWrapper(
         return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;
     }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]);
     const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
-        addBottomSafeAreaPadding: !showBottomContent,
+        addBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom,
         styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
     });
 
@@ -404,11 +404,15 @@ function ScreenWrapper(
                                         : children
                                 }
                                 {isSmallScreenWidth && shouldShowOfflineIndicator && (
-                                    <View style={[mobileOfflineIndicatorContainerStyle]}>
-                                        <OfflineIndicator style={mobileOfflineIndicatorStyle} />
-                                        {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                    <>
+                                        {isOffline && (
+                                            <View style={[mobileOfflineIndicatorContainerStyle]}>
+                                                <OfflineIndicator style={mobileOfflineIndicatorStyle} />
+                                                {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                            </View>
+                                        )}
                                         <ImportedStateIndicator />
-                                    </View>
+                                    </>
                                 )}
                                 {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && (
                                     <>

From 2588f378309f01d96938071a4d773198bf7ba777 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Tue, 18 Mar 2025 17:41:39 +0100
Subject: [PATCH 19/19] docs: add `styleProperty` comment

---
 src/hooks/useBottomSafeSafeAreaPaddingStyle.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
index d1c004e7bbde9..5e6e3f39e6508 100644
--- a/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
+++ b/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts
@@ -16,6 +16,7 @@ type UseBottomSafeAreaPaddingStyleParams = {
     /** The style to adapt and add bottom safe area padding to. */
     style?: StyleProp<ViewStyle>;
 
+    /** The style property to use for applying the bottom safe area padding. */
     styleProperty?: 'paddingBottom' | 'bottom';
 
     /** The additional padding to add to the bottom of the content. */