Use expo/react-native-action-sheet

zulip · May 21, 2017 · 9a72802 · 9a72802
1 parent 01e4811
commit 9a72802
Show file tree

Hide file tree

Showing 4 changed files with 290 additions and 239 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "test": "npm run test:lint && npm run test:coveralls && npm run test:flow"
   },
   "dependencies": {
+    "@expo/react-native-action-sheet": "^0.3.1",
     "base-64": "^0.1.0",
     "buffer": "^5.0.2",
     "color": "^1.0.3",
@@ -34,7 +35,6 @@
     "react": "16.0.0-alpha.6",
     "react-intl": "^2.2.3",
     "react-native": "^0.43.3",
-    "react-native-actionsheet": "^2.0.5",
     "react-native-device-info": "^0.10.1",
     "react-native-drawer": "^2.3.0",
     "react-native-fabric": "^0.4.1",

diff --git a/src/ZulipMobile.js b/src/ZulipMobile.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { Text } from 'react-native';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl';
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import store, { restore } from './store';
 import messages from './i18n/messages';
@@ -32,14 +33,16 @@ export default class ZulipMobile extends Component {
 
     return (
       <Provider store={store}>
-        <IntlProvider
-          key={locale}
-          locale={locale}
-          textComponent={Text}
-          messages={messages[locale]}
-        >
-          <NavigationContainer />
-        </IntlProvider>
+        <ActionSheetProvider>
+          <IntlProvider
+            key={locale}
+            locale={locale}
+            textComponent={Text}
+            messages={messages[locale]}
+          >
+            <NavigationContainer />
+          </IntlProvider>
+        </ActionSheetProvider>
       </Provider>
     );
   }

diff --git a/src/message/MessageList.js b/src/message/MessageList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ActionSheet from 'react-native-actionsheet'; // eslint-disable-line
+import { connectActionSheet } from '@expo/react-native-action-sheet';
 
 import styles from '../styles';
 import TaggedView from '../native/TaggedView';
@@ -9,7 +9,7 @@ import InfiniteScrollView from './InfiniteScrollView';
 import renderMessages from './renderMessages';
 import { constructActionButtons, executeActionSheetAction } from './messageActionSheet';
 
-export default class MessageList extends React.PureComponent {
+class MessageList extends React.PureComponent {
   autoScrollToBottom = false;
 
   constructor(props) {
@@ -26,22 +26,22 @@ export default class MessageList extends React.PureComponent {
   }
 
   handleLongPress = (message) => {
-    this.messageLongPressed = message;
     const { auth, narrow, subscriptions, mute } = this.props;
-    this.setState({
-      actionSheetButtons: constructActionButtons({ message, auth, narrow, subscriptions, mute })
-    });
-    this.actionSheet.show();
-  }
+    const options = constructActionButtons({ message, auth, narrow, subscriptions, mute });
+    const cancelButtonIndex = options.length - 1;
 
-  handleActionSheetPress = buttonIndex => {
-    executeActionSheetAction({
-      title: this.state.actionSheetButtons[buttonIndex],
-      message: this.messageLongPressed,
-      ...this.props
-    });
-    this.messageLongPressed = undefined;
-  };
+    this.props.showActionSheetWithOptions({
+      options,
+      cancelButtonIndex,
+    },
+      (buttonIndex) => {
+        executeActionSheetAction({
+          title: options[buttonIndex],
+          message,
+          ...this.props
+        });
+      });
+  }
 
   render() {
     const {
@@ -92,13 +92,9 @@ export default class MessageList extends React.PureComponent {
         {messageList}
         {!singleFetchProgress && fetching.newer && <LoadingIndicator active />}
         {typingUsers && <MessageTyping users={typingUsers} pushRoute={pushRoute} />}
-        <ActionSheet
-          ref={(ac) => { this.actionSheet = ac; }}
-          options={this.state.actionSheetButtons}
-          onPress={this.handleActionSheetPress}
-          cancelButtonIndex={this.state.actionSheetButtons.length - 1}
-        />
       </InfiniteScrollView>
     );
   }
 }
+
+export default connectActionSheet(MessageList);