Pop up Menu for Comment Cards

components/atoms/ButtonWrapper.js

@@ -1,13 +1,13 @@
-import { StyleSheet, Text, View, TouchableWithoutFeedback} from 'react-native'
+import { StyleSheet, Text, View, TouchableWithoutFeedback, TouchableOpacity} from 'react-native'
 import React from 'react'
 
 const ButtonWrapper = ({ onPress, children, buttonStyle}) => {
     return (
-        <TouchableWithoutFeedback onPress={onPress}>
+        <TouchableOpacity onPress={onPress}>
             <View style={[styles.buttonStyle, buttonStyle]}>
                 {children}
             </View>
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
     )
 }
 

components/organisms/Cards/CommentCard.js

@@ -6,7 +6,7 @@ import LineIcon from 'react-native-vector-icons/SimpleLineIcons'
 import colors from '../../../theme/colors'
 import fonts from '../../../theme/fonts'
 import images from '../../../assets/images/images'
-import { Menu, PaperProvider } from 'react-native-paper'
+import { Menu, Provider } from 'react-native-paper'
 
 const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeCount, }) => {
 
@@ -17,13 +17,26 @@ const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeC
     const [dislikeCounter, setDislikeCounter] = useState(dislikeCount ?? 452)
 
     // * Menu Visibility
-    const [menuVisible, setMenuVisible] = React.useState(false);
-    const openMenu = () => setMenuVisible(true);
-    const closeMenu = () => setMenuVisible(false);
+    const [optionsMenuVisible, setOptionsMenuVisible] = React.useState(false);
+    const openOptionsMenu = () => setOptionsMenuVisible(true);
+    const closeOptionsMenu = () => setOptionsMenuVisible(false);
+    const toggleOptionsMenu = () => setOptionsMenuVisible(!optionsMenuVisible)
+
+    const [optionsMenuAnchor, setOptionsMenuAnchor] = React.useState({ y: 0, x: 0 })
+    const onOptionsMenuPress = (event) => {
+        const { nativeEvent } = event;
+        console.log(nativeEvent)
+        const anchor = {
+            x: nativeEvent.locationX,
+            y: nativeEvent.locationY,
+            // x:0,
+            // y:0
+        };
+
+        setOptionsMenuAnchor(anchor);
+        toggleOptionsMenu()
+    }
 
-    const menuAnchor = () => <ButtonWrapper onPress={openMenu} buttonStyle={styles.buttonStyle}>
-        <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
-    </ButtonWrapper>
 
     const handleToggleDislike = () => {
         setDisliked(!isDisliked)
@@ -38,69 +51,69 @@ const CommentCard = ({ navigation, timestamp, name, comment, likeCount, dislikeC
 
 
     return (
-        <View style={styles.commentContainer}>
-            <View style={styles.header}>
-                <View style={{ flexDirection: 'row' }}>
-                    <Image source={images.imageCard} style={styles.profileIcon} />
-                    <View style={{ justifyContent: 'center' }}>
-                        <Text style={styles.name}>Semina Gurung</Text>
-                        <Text style={styles.timestamp}>2 days ago</Text>
+        <Provider>
+            <View style={styles.commentContainer}>
+               
+                <View style={styles.header}>
+                    <View style={{ flexDirection: 'row' }}>
+                        <Image source={images.imageCard} style={styles.profileIcon} />
+                        <View style={{ justifyContent: 'center' }}>
+                            <Text style={styles.name}>Semina Gurung</Text>
+                            <Text style={styles.timestamp}>2 days ago</Text>
+                        </View>
                     </View>
-                </View>
-
-                <PaperProvider>
-                    <Menu
-                        visible={menuVisible}
-                        onDismiss={closeMenu}
-                    // anchor={
-                    //     menuAnchor()
-                    // }>
-                    >
-                        <Menu.Item onPress={() => { }} title="Item 1" />
-                        <Menu.Item onPress={() => { }} title="Item 2" />
-                        <Menu.Item onPress={() => { }} title="Item 3" />
-                        
-                    </Menu>
-                    <ButtonWrapper onPress={openMenu} buttonStyle={styles.buttonStyle}>
+                    <View>
+                        <Menu
+                            visible={optionsMenuVisible}
+                            onDismiss={closeOptionsMenu}
+                            anchor={ <ButtonWrapper onPress={onOptionsMenuPress} buttonStyle={styles.buttonStyle}>
                             <LineIcon name='options-vertical' color={styles.icon.color} size={styles.icon.fontSize} />
-                        </ButtonWrapper>
-                </PaperProvider>
+                        </ButtonWrapper>}
+                        >
+                            <Menu.Item onPress={() => { }} title="Item 1" />
+                            <Menu.Item onPress={() => { }} title="Item 2" />
+                            <Menu.Item onPress={() => { }} title="Item 3" />
+                        </Menu>
 
-            </View>
-            <Text style={{ paddingVertical: fonts.getSize(13), fontFamily: fonts.type.regular, fontSize: fonts.getSize(11) }}>
-                Lorem Ip sum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply du
-            </Text>
-            <View style={styles.header}>
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flexDirection: 'row', paddingRight: fonts.getSize(16) }}>
-                        <Image source={images.imageCard} style={styles.replyIcon} />
-                        <Image source={images.imageCard} style={styles.replyIcon} />
-                        <Image source={images.imageCard} style={styles.replyIcon} />
                     </View>
-                    <Text style={styles.utilText}>View 14 replies</Text>
+
                 </View>
-                <View style={styles.utilContainer}>
-                    <ButtonWrapper
-                        buttonStyle={styles.utilButtons}
-                        onPress={() => {
-                            handleToggleLike()
-                        }}
-                    >
-                        <Text style={styles.utilText}>{`${likeCounter}`}</Text>
-                        <AntIcon name={isLiked ? "like1" : "like2"} color={styles.icon.color} size={16} />
-                    </ButtonWrapper>
-                    <ButtonWrapper
-                        buttonStyle={styles.utilButtons}
-                        onPress={() => {
-                            handleToggleDislike()
-                        }}
-                    >
-                        <Text style={styles.utilText}>{`${dislikeCounter}`}</Text>
-                        <AntIcon name={isDisliked ? "dislike1" : "dislike2"} color={styles.icon.color} size={16} />
-                    </ButtonWrapper>
+               
+                <Text style={{ paddingVertical: fonts.getSize(13), fontFamily: fonts.type.regular, fontSize: fonts.getSize(11) }}>
+                    Lorem Ip sum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply du
+                </Text>
+                <View style={styles.header}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <View style={{ flexDirection: 'row', paddingRight: fonts.getSize(16) }}>
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                            <Image source={images.imageCard} style={styles.replyIcon} />
+                        </View>
+                        <Text style={styles.utilText}>View 14 replies</Text>
+                    </View>
+                    <View style={styles.utilContainer}>
+                        <ButtonWrapper
+                            buttonStyle={styles.utilButtons}
+                            onPress={() => {
+                                handleToggleLike()
+                            }}
+                        >
+                            <Text style={styles.utilText}>{`${likeCounter}`}</Text>
+                            <AntIcon name={isLiked ? "like1" : "like2"} color={styles.icon.color} size={16} />
+                        </ButtonWrapper>
+                        <ButtonWrapper
+                            buttonStyle={styles.utilButtons}
+                            onPress={() => {
+                                handleToggleDislike()
+                            }}
+                        >
+                            <Text style={styles.utilText}>{`${dislikeCounter}`}</Text>
+                            <AntIcon name={isDisliked ? "dislike1" : "dislike2"} color={styles.icon.color} size={16} />
+                        </ButtonWrapper>
+                    </View>
                 </View>
             </View>
-        </View>
+        </Provider>                  
     )
 }