Merge pull request #2050 from Expensify/beaman-focusComposeWhenNaviga…

…teModalPages Focus compose box when navigate away from RHN
Expensify · Apr 7, 2021 · 68169d3 · 68169d3
2 parents 9194fd9 + 93ed2ea
commit 68169d3
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -22,6 +22,7 @@ import {fetchCountryCodeByRequestIP} from '../../actions/GeoLocation';
 import KeyboardShortcut from '../../KeyboardShortcut';
 import Navigation from '../Navigation';
 import * as User from '../../actions/User';
+import {setModalVisibility} from '../../actions/Modal';
 import NameValuePair from '../../actions/NameValuePair';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
 import createCustomModalStackNavigator from './createCustomModalStackNavigator';
@@ -42,6 +43,17 @@ import {
 
 const RootStack = createCustomModalStackNavigator();
 
+// When modal screen gets focused, update modal visibility in Onyx
+// https://reactnavigation.org/docs/navigation-events/
+const modalScreenListeners = {
+    focus: () => {
+        setModalVisibility(true);
+    },
+    beforeRemove: () => {
+        setModalVisibility(false);
+    },
+};
+
 const propTypes = {
     network: PropTypes.shape({isOffline: PropTypes.bool}),
     ...windowDimensionsPropTypes,
@@ -147,36 +159,43 @@ class AuthScreens extends React.Component {
                     name="Settings"
                     options={modalScreenOptions}
                     component={SettingsModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="NewChat"
                     options={modalScreenOptions}
                     component={NewChatModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="NewGroup"
                     options={modalScreenOptions}
                     component={NewGroupModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="Search"
                     options={modalScreenOptions}
                     component={SearchModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="Details"
                     options={modalScreenOptions}
                     component={DetailsModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="IOU_Request"
                     options={modalScreenOptions}
                     component={IOURequestModalStackNavigator}
+                    listeners={modalScreenListeners}
                 />
                 <RootStack.Screen
                     name="IOU_Bill"
                     options={modalScreenOptions}
                     component={IOUBillStackNavigator}
+                    listeners={modalScreenListeners}
                 />
             </RootStack.Navigator>
         );