ZulipMobile [nfc]: Use just one ActionSheetProvider, here.

I don't see a reason why we'd need multiple `ActionSheetProviders`, wrapping more or less tightly the code that opens each action sheet. The examples in the docs have it wrap around the whole app [1]. I tested the message action sheet and the lightbox action sheet on iOS and Android and didn't notice any differences from the previous behavior. [1] https://github.com/expo/react-native-action-sheet
zulip · Mar 1, 2021 · a4ff91f · a4ff91f
1 parent b625669
commit a4ff91f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 52 deletions.
diff --git a/src/ZulipMobile.js b/src/ZulipMobile.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { Platform, UIManager } from 'react-native';
 import 'react-native-url-polyfill/auto';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import { BRAND_COLOR } from './styles';
 import ZulipNavigationContainer from './nav/ZulipNavigationContainer';
@@ -50,7 +51,9 @@ export default (): React$Node => (
               <TranslationProvider>
                 <ThemeProvider>
                   <BackNavigationHandler>
-                    <ZulipNavigationContainer />
+                    <ActionSheetProvider>
+                      <ZulipNavigationContainer />
+                    </ActionSheetProvider>
                   </BackNavigationHandler>
                 </ThemeProvider>
               </TranslationProvider>

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import { useSelector, useDispatch } from '../react-redux';
 import type { RouteProp } from '../react-navigation';
@@ -117,39 +116,37 @@ export default function ChatScreen(props: Props) {
   const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
 
   return (
-    <ActionSheetProvider>
-      <View style={[componentStyles.screen, { backgroundColor }]}>
-        <KeyboardAvoider style={styles.flexed} behavior="padding">
-          <ZulipStatusBar backgroundColor={streamColor} />
-          <ChatNavBar narrow={narrow} editMessage={editMessage} />
-          <OfflineNotice />
-          <UnreadNotice narrow={narrow} />
-          {(() => {
-            if (!isNarrowValid) {
-              return <InvalidNarrow narrow={narrow} />;
-            } else if (fetchError !== null) {
-              return <FetchError narrow={narrow} error={fetchError} />;
-            } else if (sayNoMessages) {
-              return <NoMessages narrow={narrow} />;
-            } else {
-              return (
-                <MessageList
-                  narrow={narrow}
-                  showMessagePlaceholders={showMessagePlaceholders}
-                  startEditMessage={setEditMessage}
-                />
-              );
-            }
-          })()}
-          {showComposeBox && (
-            <ComposeBox
-              narrow={narrow}
-              editMessage={editMessage}
-              completeEditMessage={() => setEditMessage(null)}
-            />
-          )}
-        </KeyboardAvoider>
-      </View>
-    </ActionSheetProvider>
+    <View style={[componentStyles.screen, { backgroundColor }]}>
+      <KeyboardAvoider style={styles.flexed} behavior="padding">
+        <ZulipStatusBar backgroundColor={streamColor} />
+        <ChatNavBar narrow={narrow} editMessage={editMessage} />
+        <OfflineNotice />
+        <UnreadNotice narrow={narrow} />
+        {(() => {
+          if (!isNarrowValid) {
+            return <InvalidNarrow narrow={narrow} />;
+          } else if (fetchError !== null) {
+            return <FetchError narrow={narrow} error={fetchError} />;
+          } else if (sayNoMessages) {
+            return <NoMessages narrow={narrow} />;
+          } else {
+            return (
+              <MessageList
+                narrow={narrow}
+                showMessagePlaceholders={showMessagePlaceholders}
+                startEditMessage={setEditMessage}
+              />
+            );
+          }
+        })()}
+        {showComposeBox && (
+          <ComposeBox
+            narrow={narrow}
+            editMessage={editMessage}
+            completeEditMessage={() => setEditMessage(null)}
+          />
+        )}
+      </KeyboardAvoider>
+    </View>
   );
 }
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
@@ -1,7 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
 import { View } from 'react-native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import type { Message } from '../types';
 import type { RouteProp } from '../react-navigation';
@@ -30,9 +29,7 @@ export default function LightboxScreen(props: Props) {
   return (
     <View style={styles.screen}>
       <ZulipStatusBar hidden backgroundColor="black" />
-      <ActionSheetProvider>
-        <Lightbox src={src} message={message} />
-      </ActionSheetProvider>
+      <Lightbox src={src} message={message} />
     </View>
   );
 }
diff --git a/src/search/SearchMessagesCard.js b/src/search/SearchMessagesCard.js
@@ -2,7 +2,6 @@
 
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import type { Message } from '../types';
 import { createStyleSheet } from '../styles';
@@ -49,17 +48,15 @@ export default class SearchMessagesCard extends PureComponent<Props> {
 
     return (
       <View style={styles.results}>
-        <ActionSheetProvider>
-          <MessageList
-            initialScrollMessageId={messages[0].id}
-            messages={messages}
-            narrow={HOME_NARROW}
-            htmlPieceDescriptorsForShownMessages={htmlPieceDescriptors}
-            fetching={SearchMessagesCard.NOT_FETCHING}
-            showMessagePlaceholders={false}
-            typingUsers={NULL_ARRAY}
-          />
-        </ActionSheetProvider>
+        <MessageList
+          initialScrollMessageId={messages[0].id}
+          messages={messages}
+          narrow={HOME_NARROW}
+          htmlPieceDescriptorsForShownMessages={htmlPieceDescriptors}
+          fetching={SearchMessagesCard.NOT_FETCHING}
+          showMessagePlaceholders={false}
+          typingUsers={NULL_ARRAY}
+        />
       </View>
     );
   }