building out refactored profile screen

app/mobile/ios/Databag.xcodeproj/project.pbxproj

@@ -74,15 +74,15 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Databag/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Databag/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Databag/main.m; sourceTree = "<group>"; };
-		22A26F2AA8024E1088D9E0F0 /* Roboto-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-LightItalic.ttf"; path = "../assets/fonts/Roboto-LightItalic.ttf"; sourceTree = "<group>"; };
+		22A26F2AA8024E1088D9E0F0 /* Roboto-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-LightItalic.ttf"; path = "../assets/fonts/Roboto-LightItalic.ttf"; sourceTree = "<group>"; };
-		362E7074D5874C16A31B62FE /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Regular.ttf"; path = "../assets/fonts/Roboto-Regular.ttf"; sourceTree = "<group>"; };
+		362E7074D5874C16A31B62FE /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Regular.ttf"; path = "../assets/fonts/Roboto-Regular.ttf"; sourceTree = "<group>"; };
 		3B4392A12AC88292D35C810B /* Pods-Databag.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag.debug.xcconfig"; path = "Target Support Files/Pods-Databag/Pods-Databag.debug.xcconfig"; sourceTree = "<group>"; };
-		534B4A5F74BC47BA8A24CA77 /* Roboto-BoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BoldItalic.ttf"; path = "../assets/fonts/Roboto-BoldItalic.ttf"; sourceTree = "<group>"; };
+		534B4A5F74BC47BA8A24CA77 /* Roboto-BoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BoldItalic.ttf"; path = "../assets/fonts/Roboto-BoldItalic.ttf"; sourceTree = "<group>"; };
 		5709B34CF0A7D63546082F79 /* Pods-Databag.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag.release.xcconfig"; path = "Target Support Files/Pods-Databag/Pods-Databag.release.xcconfig"; sourceTree = "<group>"; };
-		5B470EE70F4B40FA93CE1ED6 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Italic.ttf"; path = "../assets/fonts/Roboto-Italic.ttf"; sourceTree = "<group>"; };
+		5B470EE70F4B40FA93CE1ED6 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Italic.ttf"; path = "../assets/fonts/Roboto-Italic.ttf"; sourceTree = "<group>"; };
 		5B7EB9410499542E8C5724F5 /* Pods-Databag-DatabagTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag-DatabagTests.debug.xcconfig"; path = "Target Support Files/Pods-Databag-DatabagTests/Pods-Databag-DatabagTests.debug.xcconfig"; sourceTree = "<group>"; };
-		5F30ED55DB1949EAB4C68C0E /* Roboto-BlackItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BlackItalic.ttf"; path = "../assets/fonts/Roboto-BlackItalic.ttf"; sourceTree = "<group>"; };
+		5F30ED55DB1949EAB4C68C0E /* Roboto-BlackItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BlackItalic.ttf"; path = "../assets/fonts/Roboto-BlackItalic.ttf"; sourceTree = "<group>"; };
-		680D48DE60574F0082B2AA56 /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Light.ttf"; path = "../assets/fonts/Roboto-Light.ttf"; sourceTree = "<group>"; };
+		680D48DE60574F0082B2AA56 /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Light.ttf"; path = "../assets/fonts/Roboto-Light.ttf"; sourceTree = "<group>"; };
 		7B13A773299E21170048D0DD /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
 		7B4A533A29F39E250036F3ED /* Sharing.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = Sharing.appex; sourceTree = BUILT_PRODUCTS_DIR; };
 		7B4A533C29F39E250036F3ED /* ShareViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareViewController.swift; sourceTree = "<group>"; };
@@ -91,15 +91,15 @@
 		7B4A534929F39ED90036F3ED /* Sharing.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Sharing.entitlements; sourceTree = "<group>"; };
 		7B6135A429B68A7B0094A6E7 /* Databag.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = Databag.entitlements; path = Databag/Databag.entitlements; sourceTree = "<group>"; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = Databag/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		81D33AA1ED5E4DA196301306 /* Roboto-Thin.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Thin.ttf"; path = "../assets/fonts/Roboto-Thin.ttf"; sourceTree = "<group>"; };
+		81D33AA1ED5E4DA196301306 /* Roboto-Thin.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Thin.ttf"; path = "../assets/fonts/Roboto-Thin.ttf"; sourceTree = "<group>"; };
 		89C6BE57DB24E9ADA2F236DE /* Pods-Databag-DatabagTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag-DatabagTests.release.xcconfig"; path = "Target Support Files/Pods-Databag-DatabagTests/Pods-Databag-DatabagTests.release.xcconfig"; sourceTree = "<group>"; };
 		9462C028F47F083241BB7941 /* Pods_Databag.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Databag.framework; sourceTree = BUILT_PRODUCTS_DIR; };
-		B95DE2563CFF4F6994482640 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Bold.ttf"; path = "../assets/fonts/Roboto-Bold.ttf"; sourceTree = "<group>"; };
+		B95DE2563CFF4F6994482640 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Bold.ttf"; path = "../assets/fonts/Roboto-Bold.ttf"; sourceTree = "<group>"; };
-		D6B3F198900D438990E3E250 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = "<group>"; };
+		D6B3F198900D438990E3E250 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = "<group>"; };
-		DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-ThinItalic.ttf"; path = "../assets/fonts/Roboto-ThinItalic.ttf"; sourceTree = "<group>"; };
+		DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-ThinItalic.ttf"; path = "../assets/fonts/Roboto-ThinItalic.ttf"; sourceTree = "<group>"; };
-		ECFB49329806460281EC8695 /* Roboto-Black.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Black.ttf"; path = "../assets/fonts/Roboto-Black.ttf"; sourceTree = "<group>"; };
+		ECFB49329806460281EC8695 /* Roboto-Black.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Black.ttf"; path = "../assets/fonts/Roboto-Black.ttf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
-		F942FA23DB5E41CF8FA13489 /* Roboto-MediumItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-MediumItalic.ttf"; path = "../assets/fonts/Roboto-MediumItalic.ttf"; sourceTree = "<group>"; };
+		F942FA23DB5E41CF8FA13489 /* Roboto-MediumItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-MediumItalic.ttf"; path = "../assets/fonts/Roboto-MediumItalic.ttf"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -233,7 +233,6 @@
 				DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */,
 			);
 			name = Resources;
-			path = "";
 			sourceTree = "<group>";
 		};
 		BBD78D7AC51CEA395F1C20DB /* Pods */ = {
@@ -679,7 +678,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.21;
+				MARKETING_VERSION = 1.22;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -713,7 +712,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.21;
+				MARKETING_VERSION = 1.22;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

app/mobile/src/constants/Colors.js

@@ -48,6 +48,7 @@ const LightColors = {
   disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
   sliderGrip: '#eeeeee',
+  areaBorder: '#ffffff',
 };
 
 const DarkColors = {
@@ -98,6 +99,7 @@ const DarkColors = {
   disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
   sliderGrip: '#eeeeee',
+  areaBorder: '#ffffff',
 };
 
 function getColor(label) {
@@ -152,6 +154,7 @@ export const Colors = {
   disabledIndicator: getColor('disabledIndicator'),
   disconnectedIndicator: getColor('disconnectedIndicator'),
   sliderGrip: getColor('sliderGrip'),
+  areaBorder: getColor('areaBorder'),
 
   background: '#8fbea7',
   primary: '#448866',

app/mobile/src/constants/Strings.js

@@ -72,6 +72,15 @@ const Strings = [
     noBlockedTopics: 'No Blocked Topics',
     noBlockedMessages: 'No Blocked Messages',
     restore: 'Restore',
+
+    //profile page
+    edit: 'Edit',
+    name: 'Name',
+    location: 'Location',
+    description: 'Description',
+    registryVisible: 'Visible in Registry',
+    editImage: 'Edit Image',
+    editDetails: 'Edit Details', 
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -141,6 +150,15 @@ const Strings = [
     noBlockedTopics: 'Aucun Sujet Bloqué',
     noBlockedMessages: 'Aucun Message Bloqué',
     restore: 'Restaurer',
+
+    //profile page
+    edit: 'Modifier',
+    name: 'Nom',
+    location: 'Emplacement',
+    description: 'Description',
+    registryVisible: 'Visible dans le Registre',
+    editImage: 'Éditer l\'Image',
+    editDetails: 'Modifier les Détails', 
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -210,6 +228,15 @@ const Strings = [
     noBlockedTopics: 'No Hay Temas Bloqueados ',
     noBlockedMessages: 'No Hay Mensajes Bloqueados',
     restore: 'Restaurar',
+
+    //profile page
+    edit: 'Editar',
+    name: 'Nombre',
+    location: 'Ubicación',
+    description: 'Descripción',
+    registryVisible: 'Visible en el Registro',
+    editImage: 'Editar Imagen',
+    editDetails: 'Editar Detalles', 
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -279,6 +306,15 @@ const Strings = [
     noBlockedTopics: 'Keine Blockierten Themen',
     noBlockedMessages: 'Keine Blockierten Nachrichten',
     restore: 'Wiederherstellen',
+
+    //profile page
+    edit: 'Bearbeiten',
+    name: 'Name',
+    location: 'Standort',
+    description: 'Beschreibung',
+    registryVisible: 'Sichtbar in der Registrierung',
+    editImage: 'Bild Bearbeiten',
+    editDetails: 'Details bearbeiten', 
   }
 ];
 

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

@@ -1,5 +1,5 @@
 import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
-import Ionicons from 'react-native-vector-icons/AntDesign';
+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';
@@ -30,8 +30,8 @@ export function Profile() {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Account Update Failed',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
       );
     }
   }
@@ -44,29 +44,66 @@ export function Profile() {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Save Details',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
       )
     }
   }
 
-  console.log(state.imageSource);
-  
-
   return (
     <ScrollView style={styles.content}>
 
-      <Image source={state.imageSource} style={{ width: state.width, height: state.height }} resizeMode={'contain'} />
+      <Image source={state.imageSource} style={{ width: state.width, height: state.height, alignSelf: 'center' }} resizeMode={'contain'} />
 
       <View style={styles.details}>
         <View style={styles.control}>
           <TouchableOpacity style={styles.edit}>
-            <Text style={styles.editLabel}>Edit</Text>
+            <Text style={styles.editLabel}>{ state.strings.edit }</Text>
-            <MatIcons name="square-edit-outline" size={14} color={Colors.text} />
+            <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
           </TouchableOpacity>
         </View>
+
+        { state.name && (
+          <Text style={styles.nameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
+        )}
+        { !state.name && (
+          <Text style={styles.nameUnset}>{ state.strings.name }</Text>
+        )}
+
+        <Text style={styles.username} numberOfLines={1}>{ state.username }</Text>
+
+        <View style={styles.group}>
+          <View style={styles.entry}>
+            <AntIcons name="enviromento" style={styles.icon} size={20} color={Colors.text} />
+            { state.location && (
+              <Text style={styles.locationSet}>{ state.location }</Text>
+            )}
+            { !state.location && (
+              <Text style={styles.locationUnset}>Location</Text>
+            )}
+          </View>
+          <View style={styles.divider} />
+          <View style={styles.entry}>
+            <MatIcons name="book-open-outline" style={styles.icon} size={20} color={Colors.text} />
+            { state.location && (
+              <Text style={styles.descriptionSet}>{ state.description }</Text>
+            )}
+            { !state.description && (
+              <Text style={styles.descriptionUnset}>Description</Text>
+            )}
+          </View>
         </View>
 
+        <View style={styles.group}>
+          <TouchableOpacity style={styles.entry} activeOpacity={1}>
+            <MatIcons name="eye-outline" style={styles.icon} size={20} color={Colors.text} />
+            <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
+            <Switch value={state.searchable} style={styles.visibleSwitch} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
+                trackColor={styles.track} onValueChange={setVisible} />
+          </TouchableOpacity>
+        </View>
+
+      </View>
     </ScrollView>
   );
 }

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

@@ -11,17 +11,21 @@ export const styles = StyleSheet.create({
   details: {
     width: '100%',
     position: 'relative',
-    top: -16,
+    top: -32,
     minHeight: 32,
     backgroundColor: 'yellow',
     borderTopRightRadius: 32,
     borderTopLeftRadius: 32,
     backgroundColor: Colors.screenBase,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderTopWidth: 2,
+    borderColor: Colors.areaBorder,
   },
   control: {
     position: 'absolute',
     width: '100%',
-    top: -16,
+    top: -24,
     display: 'flex',
     alignItems: 'center',
   },
@@ -36,13 +40,100 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderTopWidth: 2,
+    borderColor: Colors.areaBorder,
   },
   editLabel: {
     color: Colors.text,
     paddingLeft: 8,
     paddingRight: 8,
-    fontSize: 12,
+    paddingTop: 2,
+    fontSize: 16,
     fontFamily: 'roboto',
+    color: Colors.linkText,
+  },
+  nameSet: {
+    color: Colors.text,
+    fontFamily: 'roboto',
+    fontSize: 48,
+    paddingTop: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  nameUnset: {
+    color: Colors.inputPlaceholder,
+    fontFamily: 'roboto',
+    fontSize: 48,
+    paddingTop: 8,
+    paddingLeft: 16,
+    fontStyle: 'italic',
+  },
+  username: {
+    color: Colors.text,
+    fontFamily: 'roboto',
+    fontSize: 18,
+    paddingLeft: 16,
+    paddingBottom: 16,
+  },
+  group: {
+    marginLeft: 16,
+    marginRight: 16,
+    backgroundColor: Colors.areaBase,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  divider: {
+    width: '100%',
+    height: 2, 
+    backgroundColor: Colors.screenBase,
+  },
+  entry: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 4,
+    height: 48,
+  },
+  icon: {
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  locationSet: {
+    fontSize: 16,
+    color: Colors.text,
+    fontFamily: 'roboto',
+  },
+  locationUnset: {
+    fontSize: 16,
+    color: Colors.inputPlaceholder,
+    fontFamily: 'roboto',
+    fontStyle: 'italic',
+  },
+  descriptionSet: {
+    fontSize: 16,
+    color: Colors.text,
+    fontFamily: 'roboto',
+  },
+  descriptionUnset: {
+    fontSize: 16,
+    color: Colors.inputPlaceholder,
+    fontFamily: 'roboto',
+    fontStyle: 'italic',
+  },
+  visibleLabel: {
+    fontSize: 16,
+    color: Colors.text,
+    fontFamily: 'roboto',
+  },
+  track: {
+    false: Colors.idleFill,
+    true: Colors.activeFill,
+  },
+  visibleSwitch: {
+    transform: [{ scaleX: .6 }, { scaleY: .6 }],
   },
 });
 

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

@@ -1,17 +1,26 @@
 import { useState, useEffect, useRef, useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
+import { getLanguageStrings } from 'constants/Strings';
 import { ProfileContext } from 'context/ProfileContext';
+import { AccountContext } from 'context/AccountContext';
 import avatar from 'images/avatar.png';
 
 export function useProfile() {
 
   const [state, setState] = useState({
+    strings: getLanguageStrings(),
+    searchable: null,
     imageSource: null,
+    name: null,
+    username: null,
+    location: null,
+    description: null,
   });
 
   const dimensions = useWindowDimensions();
   const profile = useContext(ProfileContext);
+  const account = useContext(AccountContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -27,13 +36,22 @@ export function useProfile() {
     }
   }, [dimensions]);
 
+  useEffect(() => {
+    const { searchable } = account.state.status;
+    updateState({ searchable });
+  }, [account.state]);
+
   useEffect(() => {
     const { name, handle, node, location, description, image } = profile.state.identity;
     const imageSource = image ? { uri: profile.state.imageUrl } : avatar;
-    updateState({ name, handle, node, location, description, imageSource });
+    const username = `${handle} / ${node}`
+    updateState({ name, username, location, description, imageSource });
   }, [profile.state]);
 
   const actions = {
+    setVisible: async (searchable) => {
+      await account.actions.setSearchable(searchable);
+    },
   };
 
   return { state, actions };

app/mobile/src/session/settings/Settings.jsx

@@ -322,6 +322,8 @@ export function Settings() {
           </TouchableOpacity>
         </View>
 
+        <View style={styles.verticalPad} />
+
         <Modal
           animationType="fade"
           transparent={true}

app/mobile/src/session/settings/Settings.styled.js

@@ -365,6 +365,10 @@ export const styles = StyleSheet.create({
     color: Colors.text,
     fontSize: 12,
   },
+  verticalPad: {
+    width: '100%',
+    height: 32,
+  },
 
 });