Replaced react-native-actionsheet with react-native-modal implementation

Signed-off-by: sarthakpranesh <[email protected]>
sarthakpranesh · Sep 2, 2020 · 154c05e · 154c05e
1 parent c4a5b42
commit 154c05e
Show file tree

Hide file tree

Showing 10 changed files with 264 additions and 218 deletions.
diff --git a/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock b/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "react": "16.13.1",
     "react-kawaii": "^0.16.0",
     "react-native": "0.63.0",
-    "react-native-actionsheet": "^2.4.2",
     "react-native-fs": "^2.16.6",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-image-crop-picker": "0.32.0",

diff --git a/src/components/BottomSheet/index.js b/src/components/BottomSheet/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {Button, Divider, DarkTheme} from 'react-native-paper';
+import Modal from 'react-native-modal';
+
+// importing Styles
+import Styles from '../../Styles.js';
+
+const BottomSheet = ({isOpen, closeBottomSheet, options}) => {
+  return (
+    <Modal
+      testID={'modal'}
+      isVisible={isOpen}
+      onSwipeComplete={closeBottomSheet}
+      swipeDirection={['down']}
+      style={styles.view}>
+      <View style={styles.content}>
+        <Text style={styles.contentTitle}>What do you wanna do?</Text>
+        {options.map((item) => {
+          const {text, onPress} = item;
+          return (
+            <Button
+              key={text}
+              mode="text"
+              labelStyle={styles.contentOptions}
+              onPress={onPress}>
+              {text}
+            </Button>
+          );
+        })}
+        <Button
+          key="cancel"
+          mode="text"
+          color={DarkTheme.colors.error}
+          labelStyle={styles.contentCancel}
+          onPress={closeBottomSheet}>
+          Cancel
+        </Button>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  content: {
+    backgroundColor: DarkTheme.colors.background,
+    padding: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  contentTitle: {
+    ...Styles.fontMedium,
+    marginBottom: 12,
+    color: 'white',
+  },
+  contentOptions: {
+    ...Styles.fontMedium,
+    marginVertical: 4,
+  },
+  contentCancel: {
+    ...Styles.fontMedium,
+    marginTop: 10,
+  },
+});
+
+export default BottomSheet;
diff --git a/src/screens/BoxScreen/index.js b/src/screens/BoxScreen/index.js
@@ -11,7 +11,9 @@ import {
   TextInput,
   ActivityIndicator,
 } from 'react-native-paper';
-import ActionSheet from 'react-native-actionsheet';
+
+// importing components
+import BottomSheet from '../../components/BottomSheet/index.js';
 
 // importing firebase utils
 import {getBox, addUserToBox, removeUserFromBox} from '../../utils/firebase.js';
@@ -33,6 +35,7 @@ class BoxScreen extends Component {
       email: '',
       actionSheetIndex: -1,
       btnLoading: false,
+      isBottomSheetOpen: false,
     };
   }
 
@@ -64,6 +67,13 @@ class BoxScreen extends Component {
     });
   };
 
+  setBottomSheet = (bool, postIndex) => {
+    this.setState({
+      isBottomSheetOpen: bool,
+      actionSheetIndex: postIndex,
+    });
+  };
+
   setAddParticipant = (email) => {
     this.setState({
       email: email,
@@ -102,56 +112,42 @@ class BoxScreen extends Component {
       });
   };
 
-  handleUserClick = (userIndex) => {
-    this.setState({
-      actionSheetIndex: userIndex,
-    });
-    this.ActionSheet.show();
+  handleOptions = (postIndex) => {
+    this.setBottomSheet(true, postIndex);
   };
 
-  handleActionPress = async (index) => {
+  handleRemoveUser = () => {
     const {actionSheetIndex, enrolledBy, auth} = this.state;
     const {state} = this.context;
-    // if index is 0 - handle remove user from box
-    if (index === 0) {
-      if (enrolledBy[actionSheetIndex].uid === auth[1]) {
-        return ToastAndroid.showWithGravity(
-          "You serious? Author can't leave group 😬",
-          ToastAndroid.LONG,
+    if (enrolledBy[actionSheetIndex].uid === auth[1]) {
+      return ToastAndroid.showWithGravity(
+        "You serious? Author can't leave group 😬",
+        ToastAndroid.LONG,
+        ToastAndroid.CENTER,
+      );
+    }
+    removeUserFromBox(enrolledBy[actionSheetIndex].uid, state.box)
+      .then(() => {
+        this.fetchEnrolledUsers();
+        ToastAndroid.showWithGravity(
+          'User removed from the box 😖',
+          ToastAndroid.SHORT,
           ToastAndroid.CENTER,
         );
-      }
-      removeUserFromBox(enrolledBy[actionSheetIndex].uid, state.box)
-        .then(() => {
-          this.fetchEnrolledUsers();
-          ToastAndroid.showWithGravity(
-            'User removed from the box 😖',
-            ToastAndroid.SHORT,
-            ToastAndroid.CENTER,
-          );
-        })
-        .catch((err) => {
-          ToastAndroid.showWithGravity(
-            err.message,
-            ToastAndroid.SHORT,
-            ToastAndroid.CENTER,
-          );
-        });
-    }
-
-    // if index is 1 - handle cancel
-    if (index === 1) {
-      console.log('Cancelling the Action Sheet');
-    }
-
-    this.setState({
-      actionSheetIndex: -1,
-    });
-    return;
+      })
+      .catch((err) => {
+        ToastAndroid.showWithGravity(
+          err.message,
+          ToastAndroid.SHORT,
+          ToastAndroid.CENTER,
+        );
+      })
+      .finally(() => this.fetchEnrolledUsers());
+    this.setBottomSheet(false, -1);
   };
 
   render() {
-    const {enrolledBy, btnLoading} = this.state;
+    const {enrolledBy, btnLoading, isBottomSheetOpen} = this.state;
 
     return (
       <View style={styles.boxScreenContainer}>
@@ -197,7 +193,7 @@ class BoxScreen extends Component {
             return (
               <Card
                 style={styles.card}
-                onPress={() => this.handleUserClick(index)}>
+                onPress={() => this.handleOptions(index)}>
                 <Card.Content>
                   <Subheading style={Styles.fontMedium}>{item.name}</Subheading>
                 </Card.Content>
@@ -206,13 +202,10 @@ class BoxScreen extends Component {
           }}
           ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
         />
-        <ActionSheet
-          ref={(o) => (this.ActionSheet = o)}
-          title={'What do you wanna do?'}
-          options={['Remove User', 'Cancel']}
-          cancelButtonIndex={1}
-          destructiveButtonIndex={1}
-          onPress={(index) => this.handleActionPress(index)}
+        <BottomSheet
+          isOpen={isBottomSheetOpen}
+          closeBottomSheet={() => this.setBottomSheet(false)}
+          options={[{text: 'Remove User', onPress: this.handleRemoveUser}]}
         />
       </View>
     );

diff --git a/src/screens/CommentScreen/index.js b/src/screens/CommentScreen/index.js
@@ -5,7 +5,7 @@ import {
   Alert,
   ToastAndroid,
   Dimensions,
-  TouchableOpacity,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import {
   TextInput,
@@ -16,9 +16,11 @@ import {
   Headline,
 } from 'react-native-paper';
 import database from '@react-native-firebase/database';
-import ActionSheet from 'react-native-actionsheet';
 import {SpeechBubble} from 'react-kawaii/lib/native/';
 
+// importing components
+import BottomSheet from '../../components/BottomSheet/index.js';
+
 // importing firebase utils
 import {commentOnPost, deleteComment} from '../../utils/firebase.js';
 
@@ -41,6 +43,7 @@ class CommentScreen extends Component {
       comment: '',
       commenting: false,
       actionSheetIndex: -1,
+      isBottomSheetOpen: false,
     };
   }
 
@@ -80,6 +83,13 @@ class CommentScreen extends Component {
     });
   }
 
+  setBottomSheet = (bool, postIndex) => {
+    this.setState({
+      isBottomSheetOpen: bool,
+      actionSheetIndex: postIndex,
+    });
+  };
+
   comment() {
     const {comment, post} = this.state;
     const {state} = this.context;
@@ -106,46 +116,31 @@ class CommentScreen extends Component {
       });
   }
 
-  handleCommentClick = (commentIndex) => {
-    this.setState({
-      actionSheetIndex: commentIndex,
-    });
-    this.ActionSheet.show();
+  handleOptions = (postIndex) => {
+    this.setBottomSheet(true, postIndex);
   };
 
-  handleActionPress = async (index) => {
+  handleCommentDelete = () => {
     const {actionSheetIndex, post} = this.state;
     const {state} = this.context;
-    // if index is 0 - handle remove comment from box
-    if (index === 0) {
-      if (post.uid === state.uid) {
-        // author can delete all comments
-        deleteComment(state.box, post.name, actionSheetIndex).catch((err) =>
-          console.log(err.message),
-        );
-      } else if (post.comment[actionSheetIndex].uid === state.uid) {
-        // comment author can delete his/her comment only
-        deleteComment(state.box, post.name, actionSheetIndex).catch((err) =>
-          console.log(err.message),
-        );
-      } else {
-        ToastAndroid.showWithGravity(
-          'Only author of post and comment can delete comments',
-          ToastAndroid.SHORT,
-          ToastAndroid.CENTER,
-        );
-      }
-    }
-
-    // if index is 1 - handle cancel
-    if (index === 1) {
-      console.log('Cancelling the Action Sheet');
+    if (post.uid === state.uid) {
+      // author can delete all comments
+      deleteComment(state.box, post.name, actionSheetIndex).catch((err) =>
+        console.log(err.message),
+      );
+    } else if (post.comment[actionSheetIndex].uid === state.uid) {
+      // comment author can delete his/her comment only
+      deleteComment(state.box, post.name, actionSheetIndex).catch((err) =>
+        console.log(err.message),
+      );
+    } else {
+      ToastAndroid.showWithGravity(
+        'Only author of post and comment can delete comments',
+        ToastAndroid.SHORT,
+        ToastAndroid.CENTER,
+      );
     }
-
-    this.setState({
-      actionSheetIndex: -1,
-    });
-    return;
+    this.setBottomSheet(false, -1);
   };
 
   renderComments = () => {
@@ -173,8 +168,8 @@ class CommentScreen extends Component {
         keyExtractor={(_, index) => index}
         renderItem={({item, index}) => {
           return (
-            <TouchableOpacity
-              onLongPress={() => this.handleCommentClick(index)}>
+            <TouchableWithoutFeedback
+              onLongPress={() => this.handleOptions(index)}>
               <Card>
                 <Card.Actions>
                   <Text>{item.name}:</Text>
@@ -183,7 +178,7 @@ class CommentScreen extends Component {
                   <Text>{item.comment}</Text>
                 </Card.Content>
               </Card>
-            </TouchableOpacity>
+            </TouchableWithoutFeedback>
           );
         }}
         ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
@@ -192,7 +187,7 @@ class CommentScreen extends Component {
   };
 
   render() {
-    const {commenting, comment, post} = this.state;
+    const {commenting, comment, post, isBottomSheetOpen} = this.state;
 
     return (
       <View style={styles.commentScreen}>
@@ -216,13 +211,12 @@ class CommentScreen extends Component {
             Comment
           </Button>
         </View>
-        <ActionSheet
-          ref={(o) => (this.ActionSheet = o)}
-          title={'What do you wanna do?'}
-          options={['Remove Comment', 'Cancel']}
-          cancelButtonIndex={1}
-          destructiveButtonIndex={1}
-          onPress={(index) => this.handleActionPress(index)}
+        <BottomSheet
+          isOpen={isBottomSheetOpen}
+          closeBottomSheet={() => this.setBottomSheet(false)}
+          options={[
+            {text: 'Remove Comment', onPress: this.handleCommentDelete},
+          ]}
         />
       </View>
     );