From 33bd023d6c367b1eca7f377cce87a924e4598479 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 26 Mar 2025 11:52:21 +0100 Subject: [PATCH 1/2] fix: always offset bottom safe area padding --- src/components/ScreenWrapper.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index c15c96211d84..9e71f2e1f442 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -350,6 +350,9 @@ function ScreenWrapper( return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG; }, [bottomContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]); + /** In edge-to-edge mode, we always want to apply the bottom safe area padding to the mobile offline indicator. */ + const hasMobileOfflineIndicatorBottomSafeAreaPadding = enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom; + /** * This style includes the bottom safe area padding for the mobile offline indicator. * If the device has soft keys, the mobile offline indicator will stick to the navigation bar (bottom of the screen) @@ -359,7 +362,7 @@ function ScreenWrapper( * If the device does not have soft keys, the bottom safe area padding is applied as `paddingBottom`. */ const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({ - addBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom, + addBottomSafeAreaPadding: hasMobileOfflineIndicatorBottomSafeAreaPadding, styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom', }); @@ -389,8 +392,8 @@ function ScreenWrapper( const displayMobileOfflineIndicator = isSmallScreenWidth && shouldShowOfflineIndicator; const displayWidescreenOfflineIndicator = !shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen; - /** If we currently show the offline indicator and it sticks to the bottom, we need to offset the bottom safe area padding in the KeyboardAvoidingView. */ - const shouldOffsetMobileOfflineIndicator = displayMobileOfflineIndicator && displayStickyMobileOfflineIndicator && isOffline; + /** If we currently show the offline indicator and it has bottom safe area padding, we need to offset the bottom safe area padding in the KeyboardAvoidingView. */ + const shouldOffsetMobileOfflineIndicator = displayMobileOfflineIndicator && hasMobileOfflineIndicatorBottomSafeAreaPadding && isOffline; /** Whether the mobile offline indicator or the content in general should be offset by the bottom safe area padding. */ const shouldOffsetBottomSafeAreaPadding = shouldKeyboardOffsetBottomSafeAreaPadding || shouldOffsetMobileOfflineIndicator; From fdb9f17c14fbcc3e4b23f87481ea7ae029dbe970 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 27 Mar 2025 19:07:58 +0100 Subject: [PATCH 2/2] remove unnecessary variable --- src/components/ScreenWrapper.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 9e71f2e1f442..15a97159e40c 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -395,9 +395,6 @@ function ScreenWrapper( /** If we currently show the offline indicator and it has bottom safe area padding, we need to offset the bottom safe area padding in the KeyboardAvoidingView. */ const shouldOffsetMobileOfflineIndicator = displayMobileOfflineIndicator && hasMobileOfflineIndicatorBottomSafeAreaPadding && isOffline; - /** Whether the mobile offline indicator or the content in general should be offset by the bottom safe area padding. */ - const shouldOffsetBottomSafeAreaPadding = shouldKeyboardOffsetBottomSafeAreaPadding || shouldOffsetMobileOfflineIndicator; - const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit()); const contextValue = useMemo( () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}), @@ -423,7 +420,9 @@ function ScreenWrapper( style={[styles.w100, styles.h100, !isBlurred ? {maxHeight} : undefined, isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {}]} behavior={keyboardAvoidingViewBehavior} enabled={shouldEnableKeyboardAvoidingView} - shouldOffsetBottomSafeAreaPadding={shouldOffsetBottomSafeAreaPadding} + // Whether the mobile offline indicator or the content in general + // should be offset by the bottom safe area padding when the keyboard is open. + shouldOffsetBottomSafeAreaPadding={shouldKeyboardOffsetBottomSafeAreaPadding || shouldOffsetMobileOfflineIndicator} >