fix: Remove mobile offline indicator on "Start chat" page

src/components/BlockingViews/BlockingView.tsx

@@ -109,8 +109,8 @@ function BlockingView({
     CustomSubtitle,
     contentFitImage,
     containerStyle: containerStyleProp,
-    addBottomSafeAreaPadding = false,
-    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
+    addBottomSafeAreaPadding,
+    addOfflineIndicatorBottomSafeAreaPadding,
     testID,
 }: BlockingViewProps) {
     const styles = useThemeStyles();

src/components/CategorySelector/CategorySelectorModal.tsx

@@ -56,7 +56,6 @@ function CategorySelectorModal({policyID, isVisible, currentCategory, onCategory
                     policyID={policyID}
                     selectedCategory={currentCategory}
                     onSubmit={onCategorySelected}
-                    contentContainerStyle={styles.pb5}
                     addBottomSafeAreaPadding
                 />
             </ScreenWrapper>

src/components/FixedFooter.tsx

@@ -22,13 +22,7 @@ type FixedFooterProps = {
     shouldStickToBottom?: boolean;
 };
 
-function FixedFooter({
-    style,
-    children,
-    addBottomSafeAreaPadding = false,
-    addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
-    shouldStickToBottom = false,
-}: FixedFooterProps) {
+function FixedFooter({style, children, addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, shouldStickToBottom = false}: FixedFooterProps) {
     const styles = useThemeStyles();
 
     const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({

src/components/Form/FormWrapper.tsx

@@ -83,7 +83,7 @@ function FormWrapper({
     isLoading = false,
     shouldScrollToEnd = false,
     addBottomSafeAreaPadding,
-    addOfflineIndicatorBottomSafeAreaPadding: addOfflineIndicatorBottomSafeAreaPaddingProp,
+    addOfflineIndicatorBottomSafeAreaPadding,
     shouldSubmitButtonStickToBottom: shouldSubmitButtonStickToBottomProp,
     shouldSubmitButtonBlendOpacity = false,
 }: FormWrapperProps) {
@@ -137,13 +137,13 @@ function FormWrapper({
     // If the paddingBottom is 0, it has already been applied to a parent component and we don't want to apply the padding again.
     const isLegacyBottomSafeAreaPaddingAlreadyApplied = paddingBottom === 0;
     const shouldApplyBottomSafeAreaPadding = addBottomSafeAreaPadding ?? !isLegacyBottomSafeAreaPaddingAlreadyApplied;
-    const addOfflineIndicatorBottomSafeAreaPadding = addOfflineIndicatorBottomSafeAreaPaddingProp ?? addBottomSafeAreaPadding === true;
 
     // We need to add bottom safe area padding to the submit button when we don't use a scroll view or
     // when the submit button is sticking to the bottom.
     const addSubmitButtonBottomSafeAreaPadding = addBottomSafeAreaPadding && (!shouldUseScrollView || shouldSubmitButtonStickToBottom);
     const submitButtonStylesWithBottomSafeAreaPadding = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding: addSubmitButtonBottomSafeAreaPadding,
+        addOfflineIndicatorBottomSafeAreaPadding,
         styleProperty: shouldSubmitButtonStickToBottom ? 'bottom' : 'paddingBottom',
         additionalPaddingBottom: shouldSubmitButtonStickToBottom ? styles.pb5.paddingBottom : 0,
         style: submitButtonStyles,

src/components/Modal/BaseModal.tsx

@@ -1,11 +1,12 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import type {ModalProps as ReactNativeModalProps} from 'react-native-modal';
 import ReactNativeModal from 'react-native-modal';
 import type {ValueOf} from 'type-fest';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import NavigationBar from '@components/NavigationBar';
+import ScreenWrapperOfflineIndicatorContext from '@components/ScreenWrapper/ScreenWrapperOfflineIndicatorContext';
 import useKeyboardState from '@hooks/useKeyboardState';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -16,6 +17,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
+import NarrowPaneContext from '@libs/Navigation/AppNavigator/Navigators/NarrowPaneContext';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
@@ -249,76 +251,84 @@ function BaseModal(
         [isVisible, type],
     );
 
+    // In Modals we need to reset the ScreenWrapperOfflineIndicatorContext to allow nested ScreenWrapper components to render offline indicators,
+    // except if we are in a narrow pane navigator. In this case, we use the narrow pane's original values.
+    const {isInNarrowPane} = useContext(NarrowPaneContext);
+    const {originalValues} = useContext(ScreenWrapperOfflineIndicatorContext);
+    const offlineIndicatorContextValue = useMemo(() => (isInNarrowPane ? originalValues ?? {} : {}), [isInNarrowPane, originalValues]);
+
     return (
         <ModalContext.Provider value={modalContextValue}>
-            <View
-                // this is a workaround for modal not being visible on the new arch in some cases
-                // it's necessary to have a non-collapsible view as a parent of the modal to prevent
-                // a conflict between RN core and Reanimated shadow tree operations
-                // position absolute is needed to prevent the view from interfering with flex layout
-                collapsable={false}
-                style={[styles.pAbsolute, {zIndex: 1}]}
-            >
-                <ModalComponent
-                    // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
-                    onClick={(e) => e.stopPropagation()}
-                    onBackdropPress={handleBackdropPress}
-                    // Note: Escape key on web/desktop will trigger onBackButtonPress callback
-                    // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                    onBackButtonPress={closeTop}
-                    onModalShow={handleShowModal}
-                    propagateSwipe={propagateSwipe}
-                    onModalHide={hideModal}
-                    onModalWillShow={saveFocusState}
-                    onDismiss={handleDismissModal}
-                    onSwipeComplete={() => onClose?.()}
-                    swipeDirection={swipeDirection}
-                    swipeThreshold={swipeThreshold}
-                    isVisible={isVisible}
-                    backdropColor={theme.overlay}
-                    backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity}
-                    backdropTransitionOutTiming={0}
-                    hasBackdrop={fullscreen}
-                    coverScreen={fullscreen}
-                    style={[modalStyle, sidePanelStyle]}
-                    deviceHeight={windowHeight}
-                    deviceWidth={windowWidth}
-                    animationIn={animationIn ?? modalStyleAnimationIn}
-                    animationInDelay={animationInDelay}
-                    animationOut={animationOut ?? modalStyleAnimationOut}
-                    useNativeDriver={useNativeDriver}
-                    useNativeDriverForBackdrop={useNativeDriverForBackdrop}
-                    hideModalContentWhileAnimating={hideModalContentWhileAnimating}
-                    animationInTiming={animationInTiming}
-                    animationOutTiming={animationOutTiming}
-                    statusBarTranslucent={statusBarTranslucent}
-                    navigationBarTranslucent={navigationBarTranslucent}
-                    onLayout={onLayout}
-                    avoidKeyboard={avoidKeyboard}
-                    customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
-                    type={type}
-                    shouldUseNewModal={shouldUseNewModal}
+            <ScreenWrapperOfflineIndicatorContext.Provider value={offlineIndicatorContextValue}>
+                <View
+                    // this is a workaround for modal not being visible on the new arch in some cases
+                    // it's necessary to have a non-collapsible view as a parent of the modal to prevent
+                    // a conflict between RN core and Reanimated shadow tree operations
+                    // position absolute is needed to prevent the view from interfering with flex layout
+                    collapsable={false}
+                    style={[styles.pAbsolute, {zIndex: 1}]}
                 >
-                    <ModalContent
+                    <ModalComponent
+                        // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
+                        onClick={(e) => e.stopPropagation()}
+                        onBackdropPress={handleBackdropPress}
+                        // Note: Escape key on web/desktop will trigger onBackButtonPress callback
+                        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+                        onBackButtonPress={closeTop}
+                        onModalShow={handleShowModal}
+                        propagateSwipe={propagateSwipe}
+                        onModalHide={hideModal}
                         onModalWillShow={saveFocusState}
                         onDismiss={handleDismissModal}
+                        onSwipeComplete={() => onClose?.()}
+                        swipeDirection={swipeDirection}
+                        swipeThreshold={swipeThreshold}
+                        isVisible={isVisible}
+                        backdropColor={theme.overlay}
+                        backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity}
+                        backdropTransitionOutTiming={0}
+                        hasBackdrop={fullscreen}
+                        coverScreen={fullscreen}
+                        style={[modalStyle, sidePanelStyle]}
+                        deviceHeight={windowHeight}
+                        deviceWidth={windowWidth}
+                        animationIn={animationIn ?? modalStyleAnimationIn}
+                        animationInDelay={animationInDelay}
+                        animationOut={animationOut ?? modalStyleAnimationOut}
+                        useNativeDriver={useNativeDriver}
+                        useNativeDriverForBackdrop={useNativeDriverForBackdrop}
+                        hideModalContentWhileAnimating={hideModalContentWhileAnimating}
+                        animationInTiming={animationInTiming}
+                        animationOutTiming={animationOutTiming}
+                        statusBarTranslucent={statusBarTranslucent}
+                        navigationBarTranslucent={navigationBarTranslucent}
+                        onLayout={onLayout}
+                        avoidKeyboard={avoidKeyboard}
+                        customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
+                        type={type}
+                        shouldUseNewModal={shouldUseNewModal}
                     >
-                        <FocusTrapForModal
-                            active={isVisible}
-                            initialFocus={initialFocus}
-                            shouldPreventScroll={shouldPreventScrollOnFocus}
+                        <ModalContent
+                            onModalWillShow={saveFocusState}
+                            onDismiss={handleDismissModal}
                         >
-                            <View
-                                style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
-                                ref={ref}
+                            <FocusTrapForModal
+                                active={isVisible}
+                                initialFocus={initialFocus}
+                                shouldPreventScroll={shouldPreventScrollOnFocus}
                             >
-                                <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
-                            </View>
-                        </FocusTrapForModal>
-                    </ModalContent>
-                    {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}
-                </ModalComponent>
-            </View>
+                                <View
+                                    style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
+                                    ref={ref}
+                                >
+                                    <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+                                </View>
+                            </FocusTrapForModal>
+                        </ModalContent>
+                        {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}
+                    </ModalComponent>
+                </View>
+            </ScreenWrapperOfflineIndicatorContext.Provider>
         </ModalContext.Provider>
     );
 }

src/components/OfflineIndicator.tsx

@@ -31,6 +31,7 @@ function OfflineIndicator({style, containerStyles: containerStylesProp, addBotto
     const fallbackStyle = useMemo(() => [styles.offlineIndicatorContainer, containerStylesProp], [styles.offlineIndicatorContainer, containerStylesProp]);
     const containerStyles = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding,
+        addOfflineIndicatorBottomSafeAreaPadding: false,
         style: fallbackStyle,
     });
 

src/components/ScreenWrapper/ScreenWrapperOfflineIndicatorContext.ts

@@ -0,0 +1,19 @@
+import {createContext} from 'react';
+
+type ScreenWrapperOfflineIndicatorBaseContext = {
+    showOnSmallScreens?: boolean;
+    showOnWideScreens?: boolean;
+    addSafeAreaPadding?: boolean;
+};
+
+type ScreenWrapperOfflineIndicatorContextType = {
+    showOnSmallScreens?: boolean;
+    showOnWideScreens?: boolean;
+    addSafeAreaPadding?: boolean;
+    originalValues?: ScreenWrapperOfflineIndicatorBaseContext;
+};
+
+const ScreenWrapperOfflineIndicatorContext = createContext<ScreenWrapperOfflineIndicatorContextType>({});
+
+export default ScreenWrapperOfflineIndicatorContext;
+export type {ScreenWrapperOfflineIndicatorContextType};