From de76e7ecd4b5beee66119cde9e1d314a4138c09e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 6 Dec 2024 16:04:58 +0700 Subject: [PATCH 1/3] fix: Navigation bar shows purple color in offline mode --- src/components/ScreenWrapper.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 09315bfb8a8e..7d87e338b738 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -8,7 +8,6 @@ import type {EdgeInsets} from 'react-native-safe-area-context'; import useEnvironment from '@hooks/useEnvironment'; import useInitialDimensions from '@hooks/useInitialWindowDimensions'; import useKeyboardState from '@hooks/useKeyboardState'; -import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useTackInputFocus from '@hooks/useTackInputFocus'; @@ -109,7 +108,7 @@ type ScreenWrapperProps = { type ScreenWrapperStatusContextType = { didScreenTransitionEnd: boolean; isSafeAreaTopPaddingApplied: boolean; - isSafeAreaBottomPaddingApplied: boolean; + includeSafeAreaPaddingBottom: boolean; }; const ScreenWrapperStatusContext = createContext(undefined); @@ -160,7 +159,6 @@ function ScreenWrapper( const styles = useThemeStyles(); const keyboardState = useKeyboardState(); const {isDevelopment} = useEnvironment(); - const {isOffline} = useNetwork(); const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined; const minHeight = shouldEnableMinHeight && !Browser.isSafari() ? initialHeight : undefined; @@ -252,18 +250,17 @@ function ScreenWrapper( } // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. - const isSafeAreaBottomPaddingApplied = includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator); - if (isSafeAreaBottomPaddingApplied) { + if (includeSafeAreaPaddingBottom) { paddingStyle.paddingBottom = paddingBottom; } - if (isSafeAreaBottomPaddingApplied && ignoreInsetsConsumption) { + if (includeSafeAreaPaddingBottom && ignoreInsetsConsumption) { paddingStyle.paddingBottom = unmodifiedPaddings.bottom; } const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit()); const contextValue = useMemo( - () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied}), - [didScreenTransitionEnd, isSafeAreaBottomPaddingApplied, isSafeAreaTopPaddingApplied], + () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, includeSafeAreaPaddingBottom}), + [didScreenTransitionEnd, includeSafeAreaPaddingBottom, isSafeAreaTopPaddingApplied], ); return ( @@ -305,7 +302,10 @@ function ScreenWrapper( } {isSmallScreenWidth && shouldShowOfflineIndicator && ( <> - + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} From b545bac388de599554f0fdb3e7527edf7cd14b38 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 6 Dec 2024 16:17:11 +0700 Subject: [PATCH 2/3] fix typecheck --- src/components/ScreenWrapper.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 7d87e338b738..76efb954b64d 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -108,7 +108,7 @@ type ScreenWrapperProps = { type ScreenWrapperStatusContextType = { didScreenTransitionEnd: boolean; isSafeAreaTopPaddingApplied: boolean; - includeSafeAreaPaddingBottom: boolean; + isSafeAreaBottomPaddingApplied: boolean; }; const ScreenWrapperStatusContext = createContext(undefined); @@ -259,7 +259,7 @@ function ScreenWrapper( const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit()); const contextValue = useMemo( - () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, includeSafeAreaPaddingBottom}), + () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied: includeSafeAreaPaddingBottom}), [didScreenTransitionEnd, includeSafeAreaPaddingBottom, isSafeAreaTopPaddingApplied], ); @@ -304,7 +304,11 @@ function ScreenWrapper( <> {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} From 8286cc316b441506cccb27f9869d2308116480d1 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 24 Dec 2024 13:55:11 +0700 Subject: [PATCH 3/3] fix style offline indicattor --- 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 24dbf482cdc7..464509b0a947 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -298,7 +298,7 @@ function ScreenWrapper( style={[offlineIndicatorStyle]} containerStyles={ includeSafeAreaPaddingBottom - ? [] + ? [styles.offlineIndicatorMobile] : [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + styles.offlineIndicatorMobile.paddingBottom}] } />