loading registry

app/client/mobile/src/registry/Registry.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { IconButton } from 'react-native-paper';
+import { ContactParams } from '../profile/Profile';
 
-export function Registry() {
+export function Registry({ close, openContact }: { close: ()=>void, openContact: (params: ContactParams)=>void }) {
-  return <></>;
+  return <IconButton mode="contained" icon={'close'} size={32} onPress={close} />
 }

app/client/mobile/src/session/Session.styled.ts

@@ -1,7 +1,7 @@
 import {StyleSheet} from 'react-native';
 
 export const styles = StyleSheet.create({
-  screen: {
+  container: {
     width: '100%',
     height: '100%',
   },
@@ -22,4 +22,31 @@ export const styles = StyleSheet.create({
   channels: {
     flexGrow: 1,
   },
+  screen: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  body: {
+    width: '100%',
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  tabs: {
+    flexShrink: 0,
+    height: 64,
+    width: '100%',
+    displlay: 'flex',
+    flexDirection: 'row',
+  },
+  idleTab: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    opacity: 0.5,
+  },
+  activeTab: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  }
 });

app/client/mobile/src/session/Session.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {SafeAreaView, View, useColorScheme} from 'react-native';
 import {styles} from './Session.styled';
-import {BottomNavigation, Surface, Text} from 'react-native-paper';
+import {IconButton, Surface, Text} from 'react-native-paper';
 import {Settings} from '../settings/Settings';
 import {Channels} from '../channels/Channels';
 import {Contacts} from '../contacts/Contacts';
@@ -26,59 +26,55 @@ const ProfileDrawer = createDrawerNavigator();
 const DetailsDrawer = createDrawerNavigator();
 
 const ContactStack = createStackNavigator();
-const TopicStack = createStackNavigator();
+const ContentStack = createStackNavigator();
 
 export function Session() {
   const {state} = useSession();
   const scheme = useColorScheme();
-  const [index, setIndex] = useState(0);
+  const [tab, setTab] = useState('content');
-  const [routes] = useState([
+
-    {
-      key: 'channels',
-      title: 'Channels',
-      focusedIcon: 'comment-multiple',
-      unfocusedIcon: 'comment-multiple-outline',
-    },
-    {
-      key: 'contacts',
-      title: 'Contacts',
-      focusedIcon: 'contacts',
-      unfocusedIcon: 'contacts-outline',
-    },
-    {
-      key: 'settings',
-      title: 'Settings',
-      focusedIcon: 'cog',
-      unfocusedIcon: 'cog-outline',
-    },
-  ]);
   const sessionNav = {strings: state.strings};
 
   const ChannelsRoute = () => <Channels />;
   const ContactsRoute = () => <ContactTab />;
   const SettingsRoute = () => <Settings showLogout={true} />;
 
-  const renderScene = BottomNavigation.SceneMap({
-    channels: ChannelsRoute,
-    contacts: ContactsRoute,
-    settings: SettingsRoute,
-  });
-
   return (
-    <View style={styles.screen}>
+    <View style={styles.session}>
       {state.layout !== 'large' && (
         <Surface elevation={2}>
           <SafeAreaView style={{ width: '100%', height: '100%' }}>
-            <NavigationContainer
+            <View style={styles.screen}>
-                theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+              <View style={{...styles.body, display: tab === 'content' ? 'flex' : 'none'}}>
-              <BottomNavigation
+                <ContentTab scheme={scheme} />
-                barStyle={{ height: 64 }}
+              </View>
-                labeled={false}
+              <View style={{...styles.body, display: tab === 'contacts' ? 'flex' : 'none'}}>
-                navigationState={{index, routes}}
+                <ContactTab scheme={scheme} />
-                onIndexChange={setIndex}
+              </View>
-                renderScene={renderScene}
+              <View style={{...styles.body, display: tab === 'settings' ? 'flex' : 'none'}}>
-              />
+                <Settings showLogout={true} />
-            </NavigationContainer>
+              </View>
+              <View style={styles.tabs}>
+                { tab === 'content' && (
+                  <IconButton style={styles.activeTab} mode="contained" icon={'comment-multiple'} size={28} onPress={()=>{setTab('content')}} />
+                )}
+                { tab !== 'content' && (
+                  <IconButton style={styles.idleTab} mode="contained" icon={'comment-multiple-outline'} size={28} onPress={()=>{setTab('content')}} />
+                )}
+                { tab === 'contacts' && (
+                  <IconButton style={styles.activeTab} mode="contained" icon={'contacts'} size={28} onPress={()=>{setTab('contacts')}} />
+                )}
+                { tab !== 'contacts' && (
+                  <IconButton style={styles.idleTab} mode="contained" icon={'contacts-outline'} size={28} onPress={()=>{setTab('contacts')}} />
+                )}
+                { tab === 'settings' && (
+                  <IconButton style={styles.activeTab} mode="contained" icon={'cog'} size={28} onPress={()=>{setTab('settings')}} />
+                )}
+                { tab !== 'settings' && (
+                  <IconButton style={styles.idleTab} mode="contained" icon={'cog-outline'} size={28} onPress={()=>{setTab('settings')}} />
+                )}
+              </View>
+            </View>
           </SafeAreaView>
         </Surface>
       )}
@@ -92,13 +88,31 @@ export function Session() {
   );
 }
 
-function ContactTab() {
+function ContentTab({ scheme }: { scheme: string }) {
   return (
+            <NavigationContainer
+                theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
     <ContactStack.Navigator initialRouteName="contacts" screenOptions={{ headerShown: false }}>
-      <ContactStack.Screen name="contacts" options={{ headerBackTitleVisible: false }}>
+      <ContactStack.Screen name="content" options={{ headerBackTitleVisible: false }}>
-        {(props) => <Contacts openRegistry={()=>{console.log('openreg')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
+        {(props) => <Text>CONTENT</Text>}
       </ContactStack.Screen>
     </ContactStack.Navigator>
+            </NavigationContainer>
+  );
+}
+
+function ContactTab({ scheme }: { scheme: string }) {
+  return (
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <ContactStack.Navigator initialRouteName="contacts" screenOptions={{ headerShown: false }}>
+        <ContactStack.Screen name="contacts" options={{ headerBackTitleVisible: false }}>
+          {(props) => <Contacts openRegistry={()=>{props.navigation.navigate('registry')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
+        </ContactStack.Screen>
+        <ContactStack.Screen name="registry" options={{ headerBackTitleVisible: false }}>
+          {(props) => <Registry close={props.navigation.goBack} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
+        </ContactStack.Screen>
+      </ContactStack.Navigator>
+    </NavigationContainer>
   );
 }
 

app/client/mobile/src/settings/Settings.tsx

@@ -326,7 +326,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
   };
 
   return (
-    <>
+    <Surface elevation={0}>
       <ScrollView bounces={false}>
         <SafeAreaView style={styles.settings}>
           <Text
@@ -1427,6 +1427,6 @@ export function Settings({showLogout}: {showLogout: boolean}) {
           </KeyboardAwareScrollView>
         </View>
       </Modal>
-    </>
+    </Surface>
   );
 }