implementing profile screen

app/mobile/App.js

@@ -22,7 +22,7 @@ import { Prompt } from 'utils/Prompt';
 import ReceiveSharingIntent from 'react-native-receive-sharing-intent';
 import { Platform, PermissionsAndroid } from 'react-native';
 import { initUnifiedPush } from 'react-native-unifiedpush-connector';
-
+import { MenuProvider } from 'react-native-popup-menu';
 
 // silence warning: Sending `onAnimatedValueUpdate` with no listeners registered
 //LogBox.ignoreLogs(['Sending']);
@@ -64,6 +64,7 @@ export default function App() {
                     <DisplayContextProvider>
                       <AppContextProvider>
                         <SafeAreaProvider>
+                          <MenuProvider>
                             <NativeRouter>
                               <Routes>
                                 <Route path="/" element={ <Root /> } />
@@ -76,6 +77,7 @@ export default function App() {
                               </Routes>
                               <Prompt />
                             </NativeRouter>
+                          </MenuProvider>
                         </SafeAreaProvider>
                       </AppContextProvider>
                     </DisplayContextProvider>

app/mobile/package.json

@@ -38,6 +38,7 @@
     "react-native-gesture-handler": "^2.9.0",
     "react-native-image-crop-picker": "^0.39.0",
     "react-native-incall-manager": "^4.0.1",
+    "react-native-popup-menu": "^0.16.1",
     "react-native-reanimated": "^2.14.4",
     "react-native-reanimated-carousel": "^3.3.0",
     "react-native-receive-sharing-intent": "^2.0.0",

app/mobile/src/constants/Strings.js

@@ -157,7 +157,7 @@ const Strings = [
     location: 'Emplacement',
     description: 'Description',
     registryVisible: 'Visible dans le Registre',
-    editImage: 'Éditer l\'Image',
+    editImage: 'Modifier l\'Image',
     editDetails: 'Modifier les Détails', 
   },
   {

app/mobile/src/session/profile/Profile.jsx

@@ -3,6 +3,7 @@ import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import ImagePicker from 'react-native-image-crop-picker'
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
 import { Colors } from 'constants/Colors';
 import { useProfile } from './useProfile.hook';
 import { styles } from './Profile.styled';
@@ -50,6 +51,13 @@ export function Profile() {
     }
   }
 
+const triggerStyles = {
+  triggerTouchable: {
+    activeOpacity: 70,
+  },
+};
+
+
   return (
     <ScrollView style={styles.content}>
 
@@ -57,10 +65,24 @@ export function Profile() {
 
       <View style={styles.details}>
         <View style={styles.control}>
-          <TouchableOpacity style={styles.edit}>
+
+    <Menu>
+      <MenuTrigger customStyles={styles.trigger}>
+          <View style={styles.edit}>
             <Text style={styles.editLabel}>{ state.strings.edit }</Text>
             <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
-          </TouchableOpacity>
+          </View>
+      </MenuTrigger>
+      <MenuOptions style={styles.options}>
+        <MenuOption onSelect={() => alert(`image`)}>
+          <Text style={styles.option}>{ state.strings.editImage }</Text>
+        </MenuOption>
+        <MenuOption onSelect={() => alert(`details`)}>
+          <Text style={styles.option}>{ state.strings.editDetails }</Text>
+        </MenuOption>
+      </MenuOptions>
+    </Menu>
+
         </View>
 
         { state.name && (

app/mobile/src/session/profile/Profile.styled.js

@@ -17,9 +17,7 @@ export const styles = StyleSheet.create({
     borderTopRightRadius: 32,
     borderTopLeftRadius: 32,
     backgroundColor: Colors.screenBase,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderTopWidth: 2,
+    borderTopWidth: 1,
     borderColor: Colors.areaBorder,
   },
   control: {
@@ -42,7 +40,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     borderLeftWidth: 1,
     borderRightWidth: 1,
-    borderTopWidth: 2,
+    borderTopWidth: 1,
     borderColor: Colors.areaBorder,
   },
   editLabel: {
@@ -135,5 +133,20 @@ export const styles = StyleSheet.create({
   visibleSwitch: {
     transform: [{ scaleX: .6 }, { scaleY: .6 }],
   },
+  trigger: {
+    triggerTouchable: {
+      activeOpacity: 70,
+    },
+  },
+  options: {
+    backgroundColor: Colors.areaBase, 
+  },
+  option: {
+    padding: 4,
+    color: Colors.text,
+    backgroundColor: Colors.areaBase,
+    fontFamily: 'roboto',
+    fontSize: 16,
+  },
 });
 

app/mobile/src/session/profile/useProfile.hook.js

@@ -51,6 +51,7 @@ export function useProfile() {
   const actions = {
     setVisible: async (searchable) => {
       await account.actions.setSearchable(searchable);
+      updateState({ searchable });
     },
   };
 

app/mobile/yarn.lock

@@ -6540,6 +6540,11 @@ react-native-incall-manager@^4.0.1:
   resolved "https://registry.yarnpkg.com/react-native-incall-manager/-/react-native-incall-manager-4.0.1.tgz#7dae419433383ed31262d811fd549bba7951b2f2"
   integrity sha512-Bqq7C+p7vCmCTpM8Xv6l4DJ3UJYzVr60IvkHMw1Ugs0KJswh3veBJrpk+hUPSETPT6J/5oUwxChXlNsymsh7fg==
 
+react-native-popup-menu@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/react-native-popup-menu/-/react-native-popup-menu-0.16.1.tgz#b1bb56be5c0838bbc2f532af7b1f554b7ceef566"
+  integrity sha512-xRS7mRh0exwu7Iw8PPVHdM11d13A/KzYjy0/fZx3zVtxISxPkNaDGayau6oa7HqO3Nj0oS9ulFCYjcQfG6vahA==
+
 react-native-reanimated-carousel@^3.3.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.4.0.tgz#78ea838a972c85a1ce8fcbef20fb2ad7087c9571"