adding stack navigator for each drawer

app/client/mobile/ios/Podfile.lock

@@ -1611,7 +1611,7 @@ SPEC CHECKSUMS:
   RNVectorIcons: 845eda5c7819bd29699cafd0fc98c9d4afe28c96
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: 88480008ccacea6301ff7bf58726e27a72931c8d
+  Yoga: 04f1db30bb810187397fa4c37dd1868a27af229c
 
 PODFILE CHECKSUM: 8461018d8deceb200962c829584af7c2eb345c80
 

app/client/mobile/package.json

@@ -16,6 +16,7 @@
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/stack": "^6.4.1",
     "@types/crypto-js": "^4.2.2",
     "crypto-js": "^4.2.0",
     "databag-client-sdk": "^0.0.22",

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

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {View, useColorScheme} from 'react-native';
+import {SafeAreaView, View, useColorScheme} from 'react-native';
 import {styles} from './Session.styled';
 import {BottomNavigation, Surface, Text} from 'react-native-paper';
 import {Settings} from '../settings/Settings';
@@ -17,6 +17,7 @@ import {
   DarkTheme,
 } from '@react-navigation/native';
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import { createStackNavigator } from '@react-navigation/stack';
 
 const SettingsDrawer = createDrawerNavigator();
 const ContactsDrawer = createDrawerNavigator();
@@ -24,6 +25,9 @@ const RegistryDrawer = createDrawerNavigator();
 const ProfileDrawer = createDrawerNavigator();
 const DetailsDrawer = createDrawerNavigator();
 
+const ContactStack = createStackNavigator();
+const TopicStack = createStackNavigator();
+
 export function Session() {
   const {state} = useSession();
   const scheme = useColorScheme();
@@ -51,7 +55,7 @@ export function Session() {
   const sessionNav = {strings: state.strings};
 
   const ChannelsRoute = () => <Channels />;
-  const ContactsRoute = () => <Contacts openRegistry={()=>{console.log('openreg')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />;
+  const ContactsRoute = () => <ContactTab />;
   const SettingsRoute = () => <Settings showLogout={true} />;
 
   const renderScene = BottomNavigation.SceneMap({
@@ -63,13 +67,20 @@ export function Session() {
   return (
     <View style={styles.screen}>
       {state.layout !== 'large' && (
-        <BottomNavigation
-          barStyle={{ height: 92 }}
-          labeled={false}
-          navigationState={{index, routes}}
-          onIndexChange={setIndex}
-          renderScene={renderScene}
-        />
+        <Surface elevation={2}>
+          <SafeAreaView style={{ width: '100%', height: '100%' }}>
+            <NavigationContainer
+                theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+              <BottomNavigation
+                barStyle={{ height: 64 }}
+                labeled={false}
+                navigationState={{index, routes}}
+                onIndexChange={setIndex}
+                renderScene={renderScene}
+              />
+            </NavigationContainer>
+          </SafeAreaView>
+        </Surface>
       )}
       {state.layout === 'large' && (
         <NavigationContainer
@@ -81,6 +92,16 @@ export function Session() {
   );
 }
 
+function ContactTab() {
+  return (
+    <ContactStack.Navigator initialRouteName="contacts" screenOptions={{ headerShown: false }}>
+      <ContactStack.Screen name="contacts" options={{ headerBackTitleVisible: false }}>
+        {(props) => <Contacts openRegistry={()=>{console.log('openreg')}} openContact={(params: ContactParams)=>{console.log('opencon', params)}} />}
+      </ContactStack.Screen>
+    </ContactStack.Navigator>
+  );
+}
+
 function DetailsScreen({nav}) {
   return (
     <DetailsDrawer.Navigator