fix: offline indicator inside a keyboard avoiding view

surendrasomai · Oct 27, 2023 · 382056d · 382056d
1 parent eef8347
commit 382056d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
@@ -108,7 +108,7 @@ function ScreenWrapper({
                 }
 
                 // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
-                if (includeSafeAreaPaddingBottom || isOffline) {
+                if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) {
                     paddingStyle.paddingBottom = paddingBottom;
                 }
 

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
@@ -14,6 +14,7 @@ import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import ScreenWrapper from '../components/ScreenWrapper';
 import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
+import OfflineIndicator from '../components/OfflineIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import * as Browser from '../libs/Browser';
 import compose from '../libs/compose';
@@ -22,6 +23,7 @@ import reportPropTypes from './reportPropTypes';
 import variables from '../styles/variables';
 import useNetwork from '../hooks/useNetwork';
 import useDelayedInputFocus from '../hooks/useDelayedInputFocus';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const propTypes = {
     /** Beta features list */
@@ -58,6 +60,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
     const [filteredUserToInvite, setFilteredUserToInvite] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
     const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
     const headerMessage = OptionsListUtils.getHeaderMessage(
@@ -218,7 +221,8 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom={false}
+            includeSafeAreaPaddingBottom={isOffline}
+            shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
             testID={NewChatPage.displayName}
@@ -258,6 +262,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                             isLoadingNewOptions={isSearchingForReports}
                         />
                     </View>
+                    {isSmallScreenWidth && <OfflineIndicator style={[]} />}
                 </KeyboardAvoidingView>
             )}
         </ScreenWrapper>

diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
@@ -30,6 +30,7 @@ function NewChatSelectorPage(props) {
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
+            shouldShowOfflineIndicator={false}
             shouldEnableMaxHeight
             testID={NewChatSelectorPage.displayName}
         >

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -28,6 +28,9 @@ import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 import ValuePicker from '../../components/ValuePicker';
 import FormProvider from '../../components/Form/FormProvider';
 import InputWrapper from '../../components/Form/InputWrapper';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+import OfflineIndicator from '../../components/OfflineIndicator';
+import useNetwork from '../../hooks/useNetwork';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -74,6 +77,8 @@ const defaultProps = {
 
 function WorkspaceNewRoomPage(props) {
     const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
     const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED);
     const [policyID, setPolicyID] = useState(null);
     const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL);
@@ -171,7 +176,8 @@ function WorkspaceNewRoomPage(props) {
         >
             <ScreenWrapper
                 shouldEnableKeyboardAvoidingView={false}
-                includeSafeAreaPaddingBottom={false}
+                includeSafeAreaPaddingBottom={isOffline}
+                shouldShowOfflineIndicator={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
                 testID={WorkspaceNewRoomPage.displayName}
@@ -248,6 +254,7 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
                         </FormProvider>
+                        {isSmallScreenWidth && <OfflineIndicator style={[]} />}
                     </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>