Skip to content

fix: always offset bottom safe area padding for OfflineIndicator #59144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 2 commits into from
Mar 27, 2025
Merged

fix: always offset bottom safe area padding for OfflineIndicator #59144

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33bd023
fix: always offset bottom safe area padding
chrispader Mar 26, 2025
fdb9f17
remove unnecessary variable
chrispader Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/components/ScreenWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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',
});

Expand Down Expand Up @@ -389,11 +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;

/** Whether the mobile offline indicator or the content in general should be offset by the bottom safe area padding. */
const shouldOffsetBottomSafeAreaPadding = shouldKeyboardOffsetBottomSafeAreaPadding || shouldOffsetMobileOfflineIndicator;
/** 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;

const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && isMobileWebKit());
const contextValue = useMemo(
Expand All @@ -420,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}
>
<PickerAvoidingView
style={isAvoidingViewportScroll ? [styles.h100, {marginTop: 1}] : styles.flex1}
Expand Down