refactoring session component in mobile app

app/mobile/App.js

@@ -10,7 +10,6 @@ import { ProfileContextProvider } from 'context/ProfileContext';
 import { CardContextProvider } from 'context/CardContext';
 import { ChannelContextProvider } from 'context/ChannelContext';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { NavigationContainer } from '@react-navigation/native';
 import { ConversationContextProvider } from 'context/ConversationContext';
 import { LogBox } from 'react-native';
 import { Root } from 'src/root/Root';
@@ -41,7 +40,7 @@ export default function App() {
                           <Route path="/login" element={ <Access mode="login" /> } />
                           <Route path="/reset" element={ <Access mode="reset" /> } />
                           <Route path="/create" element={ <Access mode="create" /> } />
-                          <Route path="/session" element={ <NavigationContainer><Session/></NavigationContainer> } />
+                          <Route path="/session" element={ <Session /> } />
                         </Routes>
                       </NativeRouter>
                     </SafeAreaProvider>

app/mobile/ios/Podfile.lock

@@ -455,6 +455,9 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNScreens (3.20.0):
+    - React-Core
+    - React-RCTImage
   - RNVectorIcons (9.2.0):
     - React-Core
   - Yoga (1.14.0)
@@ -504,6 +507,7 @@ DEPENDENCIES:
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -607,6 +611,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -667,6 +673,7 @@ SPEC CHECKSUMS:
   RNFBMessaging: c686471358d20d54f716a8b7b7f10f8944c966ec
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
+  RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   Yoga: 5ed1699acbba8863755998a4245daa200ff3817b
 

app/mobile/package.json

@@ -17,6 +17,7 @@
     "@react-navigation/drawer": "^6.6.0",
     "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.10",
+    "@react-navigation/stack": "^6.3.14",
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "react": "18.2.0",
@@ -27,6 +28,7 @@
     "react-native-reanimated": "^2.14.4",
     "react-native-rsa-native": "^2.0.5",
     "react-native-safe-area-context": "^4.5.0",
+    "react-native-screens": "^3.20.0",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-vector-icons": "^9.2.0",
     "react-router-dom": "^6.8.1",

app/mobile/src/context/useStoreContext.hook.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useContext } from 'react';
 import SQLite from "react-native-sqlite-storage";
 
-const DATABAG_DB = 'db_v_102.db';
+const DATABAG_DB = 'db_v_103.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});

app/mobile/src/session/Session.jsx

@@ -1,12 +1,436 @@
-import { Text } from 'react-native';
+import { View, TouchableOpacity, StatusBar, Text, Image } from 'react-native';
-import { styles } from './Session.styled';
+import { useState, useEffect, useContext } from 'react';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import Ionicons from 'react-native-vector-icons/AntDesign';
 import { useSession } from './useSession.hook';
+import { styles } from './Session.styled';
+import Colors from 'constants/Colors';
+import { Profile } from './profile/Profile';
+import { CardsTitle, CardsBody, Cards } from './cards/Cards';
+import { useCards } from './cards/useCards.hook';
+import { RegistryTitle, RegistryBody, Registry } from './registry/Registry';
+import { useRegistry } from './registry/useRegistry.hook';
+import { Contact, ContactTitle } from './contact/Contact';
+import { Details, DetailsHeader, DetailsBody } from './details/Details';
+import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation';
+import { Welcome } from './welcome/Welcome';
+import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
+import { useConversation } from './conversation/useConversation.hook';
+import { useChannels } from './channels/useChannels.hook';
+import { CommonActions } from '@react-navigation/native';
+import { ConversationContext } from 'context/ConversationContext';
+import { ProfileIcon } from './profileIcon/ProfileIcon';
+import { CardsIcon } from './cardsIcon/CardsIcon';
+import splash from 'images/session.png';
+
+const ConversationStack = createStackNavigator();
+const ProfileStack = createStackNavigator();
+const ContactStack = createStackNavigator();
+const ProfileDrawer = createDrawerNavigator();
+const ContactDrawer = createDrawerNavigator();
+const DetailDrawer = createDrawerNavigator();
+const CardDrawer = createDrawerNavigator();
+const RegistryDrawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator();
 
 export function Session() {
 
   const { state, actions } = useSession();
+  const [selectedConversation, setSelectedConversation] = useState(null);
+  const [selectedContact, setSelectedContact] = useState(null);
 
-  return <Text>SESSION</Text>
+  // tabbed containers
+  const ConversationStackScreen = () => {
+
+    const setConversation = (navigation, cardId, channelId, revision) => {
+      navigation.navigate('conversation');
+      setSelectedConversation({ cardId, channelId, revision });
+    }
+    const clearConversation = (navigation) => {
+      navigation.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            { name: 'channels' },
+          ],
+        })
+      );
+    }
+    const setDetail = (navigation) => {
+      navigation.navigate('details');
+    }
+    const clearDetail = (navigation) => {
+      navigation.goBack();
+    }
+
+    const conversation = useConversation();
+    const channels = useChannels();
+    const conversationContext = useContext(ConversationContext);
+
+    useEffect(() => {
+      if (selectedConversation) {
+        const { cardId, channelId } = selectedConversation || {}
+        conversationContext.actions.setConversation(cardId, channelId);
+      }
+      else {
+        conversationContext.actions.clearConversation();
+      }
+    }, [selectedConversation]);      
+
+    return (
+      <ConversationStack.Navigator
+          initialRouteName="channels"
+          screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}
+          screenListeners={{ state: (e) => { if (e?.data?.state?.index === 0 && selectedConversation) { setSelectedConversation(null); }}, }}>
+        <ConversationStack.Screen name="channels" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <ChannelsTitle state={channels.state} actions={channels.actions} />
+          }}>
+          {(props) => <ChannelsBody state={channels.state} actions={channels.actions} openConversation={(cardId, channelId, revision) => setConversation(props.navigation, cardId, channelId, revision)} />}
+        </ConversationStack.Screen>
+        <ConversationStack.Screen name="conversation" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <ConversationHeader channel={selectedConversation} closeConversation={clearConversation} openDetails={setDetail}
+              state={conversation.state} actions={conversation.actions} />
+          }}>
+          {(props) => <ConversationBody channel={selectedConversation} state={conversation.state} actions={conversation.actions} />}
+        </ConversationStack.Screen>
+        <ConversationStack.Screen name="details" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <DetailsHeader channel={selectedConversation} />
+          }}>
+          {(props) => <DetailsBody channel={selectedConversation} clearConversation={() => clearConversation(props.navigation)} />}
+        </ConversationStack.Screen>
+      </ConversationStack.Navigator>
+    );
+  }
+  const ProfileStackScreen = () => {
+    return (
+      <ProfileStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
+        <ProfileStack.Screen name="profile" component={Profile} options={{ headerStyle: { backgroundColor: Colors.titleBackground }}} />
+      </ProfileStack.Navigator>
+    );
+  }
+  const ContactStackScreen = () => {
+    const setCardStack = (navigation, contact) => {
+      setSelectedContact(contact);
+      navigation.navigate('contact')
+    }
+    const clearCardStack = (navigation) => {
+      navigation.goBack();
+    }
+    const setRegistryStack = (navigation) => {
+      navigation.navigate('registry');
+    }
+    const clearRegistryStack = (navigation) => {
+      navigation.goBack();
+    }
+
+    const registry = useRegistry();
+    const cards = useCards();
+
+    return (
+      <ContactStack.Navigator screenOptions={({ route }) => ({ headerShow: true, headerTintColor: Colors.primary })}
+          initialRouteName="cards">
+        <ContactStack.Screen name="cards" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <CardsTitle state={cards.state} actions={cards.actions} openRegistry={setRegistryStack} />
+          }}>
+          {(props) => <CardsBody state={cards.state} actions={cards.actions} openContact={(contact) => setCardStack(props.navigation, contact)} />}
+        </ContactStack.Screen>
+        <ContactStack.Screen name="contact" options={{ 
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false, 
+            headerTitle: (props) => <ContactTitle contact={selectedContact} {...props} />
+          }}>
+          {(props) => <Contact contact={selectedContact} closeContact={() => clearCardStack(props.navigation)} />}
+        </ContactStack.Screen>
+        <ContactStack.Screen name="registry" options={{
+            headerStyle: { backgroundColor: Colors.titleBackground }, 
+            headerBackTitleVisible: false,
+            headerTitle: (props) => <RegistryTitle state={registry.state} actions={registry.actions} contact={selectedContact} {...props} />
+          }}>
+          {(props) => <RegistryBody state={registry.state} actions={registry.actions} openContact={(contact) => setCardStack(props.navigation, contact)} />}
+        </ContactStack.Screen>
+      </ContactStack.Navigator>
+    );
+  }
+
+  const HomeScreen = ({ cardNav, registryNav, detailNav, contactNav, profileNav, setDetails, resetConversation, clearReset }) => {
+
+    const [channel, setChannel] = useState(null);
+    const setConversation = (cardId, channelId, revision) => {
+      setChannel({ cardId, channelId, revision });
+    };
+    const clearConversation = () => {
+      setChannel(null);
+    };
+    const setProfile = () => {
+      profileNav.openDrawer();
+    };
+    const setChannelDetails = (channel) => {
+      setDetails(channel);
+      detailNav.openDrawer();
+    };
+
+    const openProfile = () => {
+      profileNav.openDrawer();
+    }
+    const openCards = () => {
+      cardNav.openDrawer();
+    }
+    const isCardOpen = () => {
+      return cardNav.getState().history.length > 1;
+    }
+
+    const conversation = useContext(ConversationContext);
+
+    useEffect(() => {
+      if (resetConversation) {
+        detailNav.closeDrawer();
+        setChannel(null);
+        setDetails(null);
+        clearReset();
+      }
+    }, [resetConversation]);
+
+    useEffect(() => {
+console.log("CHANNEL IS: ", channel);
+      if (channel) {
+        const { cardId, channelId } = channel;
+        conversation.actions.setConversation(cardId, channelId);
+      }
+      else {
+        conversation.actions.clearConversation();
+      }
+    }, [channel]);      
+
+    return (
+      <View style={styles.home}>
+        <SafeAreaView edges={['top', 'bottom']} style={styles.sidebar}>
+          <SafeAreaView edges={['left']} style={styles.options}>
+            <TouchableOpacity style={styles.option} onPress={openProfile}>
+              <ProfileIcon color={Colors.text} size={20} />
+              <Text style={styles.profileLabel}>Profile</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.option} onPress={openCards}>
+              <CardsIcon color={Colors.text} size={20} active={isCardOpen()} />
+              <Text style={styles.profileLabel}>Contacts</Text>
+            </TouchableOpacity>
+          </SafeAreaView>
+          <View style={styles.channels}>
+            <Channels openConversation={setConversation} />
+          </View>
+        </SafeAreaView>
+        <View style={styles.conversation}>
+          { channel && (
+            <Conversation closeConversation={clearConversation} openDetails={setChannelDetails} />
+          )}
+          { !channel && (
+            <Welcome />
+          )} 
+        </View>
+      </View>
+    )
+  }
+
+  const CardDrawerScreen = ({ registryNav, detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => {
+
+    const openRegistry = () => {
+      registryNav.openDrawer();
+    };
+    setCardContact = (contact) => {
+      setContact(contact);
+      contactNav.openDrawer();
+    };
+
+    const params = {
+      profileNav,
+      registryNav,
+      detailNav,
+      contactNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
+
+    return (
+      <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
+        drawerContent={(props) => <Cards openContact={setCardContact} openRegistry={openRegistry} />}>
+        <CardDrawer.Screen name="home">
+          {(props) => <HomeScreen cardNav={props.navigation} {...params} />}
+        </CardDrawer.Screen>
+      </CardDrawer.Navigator>
+    );
+  };
+
+  const RegistryDrawerScreen = ({ detailNav, contactNav, profileNav, setContact, setDetails, clearReset, resetConversation }) => {
+
+    const setRegistryContact = (contact) => {
+      setContact(contact);
+      contactNav.openDrawer();
+    };
+
+    const params = {
+      profileNav,
+      detailNav,
+      contactNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
+
+    return (
+      <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
+        drawerContent={(props) => <Registry openContact={setRegistryContact} />}>
+        <RegistryDrawer.Screen name="card">
+          {(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />}
+        </RegistryDrawer.Screen>
+      </RegistryDrawer.Navigator>
+    );
+  };
+
+  const ContactDrawerScreen = ({ detailNav, profileNav, setDetails, resetConversation, clearReset }) => {
+
+    const [selected, setSelected] = useState(null);
+    const setContact = (contact) => {
+      setSelected(contact);
+    }
+
+    const params = {
+      profileNav,
+      detailNav,
+      setDetails,
+      setContact,
+      clearReset,
+      resetConversation,
+    };
+
+    return (
+      <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
+        drawerContent={(props) => <Contact contact={selected} />}>
+        <ContactDrawer.Screen name="registry">
+          {(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />}
+        </ContactDrawer.Screen>
+      </ContactDrawer.Navigator>
+    );
+  }
+
+  const DetailDrawerScreen = ({ profileNav }) => {
+
+    const [selected, setSelected] = useState(null);
+    const [resetConversation, setResetConversation] = useState(false);
+    const setDetails = (channel) => {
+      setSelected(channel);
+    };
+    const clearConversation = () => {
+      setResetConversation(true);
+    }
+    const clearReset = () => {
+      setResetConversation(false);
+    }
+
+    const params = {
+      profileNav,
+      setDetails,
+      clearReset,
+      resetConversation,
+    };
+  
+    return (
+      <DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
+          drawerContent={(props) => <Details channel={selected} clearConversation={clearConversation} />}
+        >
+        <DetailDrawer.Screen name="contact">
+          {(props) => <ContactDrawerScreen {...params} detailNav={props.navigation} />}
+        </DetailDrawer.Screen>
+      </DetailDrawer.Navigator>
+    );
+  }
+
+  const [cardsActive, setCardsActive] = useState(false);
+
+  return (
+    <NavigationContainer>
+      <View style={styles.body}>
+        { state.firstRun == true && (
+          <SafeAreaView edges={['top', 'bottom']}  style={styles.firstRun}>
+            <View style={styles.title}>
+              <Text style={styles.titleText}>Welcome To Databag</Text>
+              <Text style={styles.tagText}>Communication for the Decentralized Web</Text>
+            </View>
+            <Image style={styles.splash} source={splash} resizeMode="contain" />
+            <View style={styles.steps} >
+              <View style={styles.step}>
+                <Ionicons name={'user'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Setup Your Profile</Text>
+              </View>
+              <View style={styles.step}>
+                <Ionicons name={'contacts'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Connect With People</Text>
+              </View>
+              <View style={styles.step}>
+                <Ionicons name={'message1'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Start a Conversation</Text>
+              </View>
+              <TouchableOpacity style={styles.start} onPress={actions.clearFirstRun}>
+                <Text style={styles.startText}>Get Started</Text>
+              </TouchableOpacity>
+            </View>
+          </SafeAreaView>
+        )}
+        { state.firstRun == false && (
+          <View style={styles.container}>
+            { state.tabbed === false && (
+              <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
+                drawerContent={(props) => <Profile />}>
+                <ProfileDrawer.Screen name="detail">
+                  {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
+                </ProfileDrawer.Screen>
+              </ProfileDrawer.Navigator>
+            )}
+            { state.tabbed === true && (
+              <Tab.Navigator
+                screenListeners={{ state: (e) => setCardsActive(e?.data?.state?.index === 2) }}
+                screenOptions={({ route }) => ({
+                  tabBarStyle: styles.tabBar,
+                  headerShown: false,
+                  tabBarIcon: ({ focused, color, size }) => {
+                    if (route.name === 'Profile') {
+                      return <ProfileIcon size={size} color={color} />
+                    }
+                    if (route.name === 'Conversation') {
+                      return <Ionicons name={'message1'} size={size} color={color} />;
+                    }
+                    if (route.name === 'Contacts') {
+                      return <CardsIcon size={size} color={color} active={cardsActive} />;
+                    }
+                  },
+                  tabBarShowLabel: false,
+                  tabBarActiveTintColor: Colors.white,
+                  tabBarInactiveTintColor: Colors.disabled,
+                })}>
+                <Tab.Screen name="Conversation" component={ConversationStackScreen} />
+                <Tab.Screen name="Profile" component={ProfileStackScreen} />
+                <Tab.Screen name="Contacts" component={ContactStackScreen} />
+              </Tab.Navigator>
+            )}
+            <StatusBar barStyle="dark-content" backgroundColor={Colors.formBackground} /> 
+          </View>
+        )}
+      </View>
+    </NavigationContainer>
+  );
 }
 
 

app/mobile/src/session/cards/Cards.jsx

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+
+export function CardsTitle({ state, actions, openRegistry }) {
+  return <Text>CardsTitle</Text>;
+}
+
+export function CardsBody({ state, actions, openContact }) {
+  return <Text>CardsBody</Text>;
+}
+
+export function Cards({ openRegistry, openContact }) {
+  return <Text>Cards</Text>;
+}
+

app/mobile/src/session/cards/useCards.hook.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+export function useCards() {
+  const [state, setState] = useState({});
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/session/cardsIcon/CardsIcon.jsx

@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+
+export function CardsIcon({ size, color, active }) {
+  return <Text>CardsIcon</Text>;
+}
+

app/mobile/src/session/channels/Channels.jsx

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+
+export function ChannelsTitle({ state, actions }) {
+  return <Text>ChannelsTitle</Text>
+}
+
+export function ChannelsBody({ state, actions, openConversation }) {
+  return <Text>ChannelsBody</Text>
+}
+
+export function Channels({ openConversation }) {
+  return <Text>Channels</Text>;
+}
+

app/mobile/src/session/channels/useChannels.hook.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export function useChannels() {
+  const [state, setState] = useState({});
+
+  const actions = {};
+
+  return { state, actions };
+}
+

app/mobile/src/session/contact/Contact.jsx

@@ -0,0 +1,10 @@
+import { Text } from 'react-native';
+
+export function ContactTitle({ contact, closeContact }) {
+  <Text>ContactTitle</Text>
+}
+
+export function Contact({ contact, closeContact }) {
+  <Text>Contact</Text>
+}
+

app/mobile/src/session/conversation/Conversation.jsx

@@ -0,0 +1,13 @@
+import { Text, } from 'react-native';
+
+export function ConversationHeader({ closeConversation, openDetails, state, actions }) {
+  return <Text>ConversationHeader</Text>;
+}
+
+export function ConversationBody({ state, actions }) {
+  return <Text>ConversationBody</Text>
+}
+
+export function Conversation({ closeConversation, openDetails }) {
+  return <Text>Conversation</Text>;
+}

app/mobile/src/session/conversation/useConversation.hook.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export function useConversation() {
+  const [state, setState] = useState({});
+
+  const actions = {};
+
+  return { state, actions };
+}
+

app/mobile/src/session/details/Details.jsx

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+
+export function DetailsHeader() {
+  return <Text>DetailsHeader</Text>
+}
+
+export function DetailsBody({ channel, clearConversation }) {
+  return <Text>DetailsBody</Text>
+}
+
+export function Details({ channel, clearConversation }) {
+  return <Text>Details</Text>
+}
+

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

@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+
+export function Profile({ navigation }) {
+  return <Text>Profile</Text>;
+}
+

app/mobile/src/session/profileIcon/ProfileIcon.jsx

@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+
+export function ProfileIcon({ size, color }) {
+  return <Text>ProfileIcon</Text>
+}
+

app/mobile/src/session/registry/Registry.jsx

@@ -0,0 +1,14 @@
+import { Text } from 'react-native';
+
+export function RegistryTitle({ state, actions }) {
+  return <Text>RegistryTitle</Text>
+}
+
+export function RegistryBody({ state, actions, openContact }) {
+  return <Text>RegistryBody</Text>
+}
+
+export function Registry({ closeRegistry, openContact }) {
+  return <Text>Registry</Text>
+}
+

app/mobile/src/session/registry/useRegistry.hook.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export function useRegistry() {
+  const [state, setState] = useState({});
+
+  const actions = {};
+
+  return { state, actions };
+}
+

app/mobile/src/session/useSession.hook.js

@@ -1,11 +1,60 @@
 import { useRef, useState, useEffect, useContext } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useNavigate } from 'react-router-dom';
+import config from 'constants/Config';
+import { StoreContext } from 'context/StoreContext';
 
 export function useSession() {
 
   const [state, setState] = useState({
+    tabbled: null,
+    subWidth: '50%',
+    baseWidth: '50%',
+    cardId: null,
+    converstaionId: null,
+    firstRun: null,
   });
 
+  const store = useContext(StoreContext);
+  const dimensions = useWindowDimensions();
+  const navigate = useNavigate();
+  const tabbed = useRef(null);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    checkFirstRun();
+  }, []);
+
+  const checkFirstRun = async () => {
+    const firstRun = await store.actions.getFirstRun();
+    updateState({ firstRun });
+  }
+
+  useEffect(() => {
+    if (tabbed.current !== true) {
+      if (dimensions.width > config.tabbedWidth) {
+        const width = Math.floor((dimensions.width * 33) / 100);
+        tabbed.current = false;
+        updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
+      }
+      else {
+        tabbed.current = true;
+        updateState({ tabbed: true });
+      }
+    }
+  }, [dimensions]);
+
   const actions = {
+    setCardId: (cardId) => {
+      updateState({ cardId });
+    },
+    clearFirstRun: () => {
+      updateState({ firstRun: false });
+      store.actions.setFirstRun();
+    },
   };
 
   return { state, actions };

app/mobile/src/session/welcome/Welcome.jsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { Image, View, TouchableOpacity, Text } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { styles } from './Welcome.styled';
+import { Colors } from 'constants/Colors';
+import Ionicons from 'react-native-vector-icons/AntDesign';
+
+import session from 'images/session.png';
+
+export function Welcome() {
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.header}>Databag</Text>
+      <Text style={styles.label}>Communication for the decentralized web</Text>
+      <Image style={styles.image} source={session} />
+      <View style={styles.steps}>
+        <Text style={styles.stepstext}>Setup your profile</Text>
+        <Ionicons name={'right'} size={18} color={Colors.text} />
+        <Text style={styles.stepstext}>Connect with people</Text>
+        <Ionicons name={'right'} size={18} color={Colors.text} />
+        <Text style={styles.stepstext}>Start a conversation</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+

app/mobile/src/session/welcome/Welcome.styled.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    backgroundColor: Colors.background,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  image: {
+    width: '100%',
+    flexGrow: 1,
+    flex: 1,
+    width: null,
+    height: null,
+    resizeMode: 'contain',
+    marginBottom: 16,
+    opacity: 0.3,
+  },
+  header: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    fontSize: 20,
+    paddingTop: 16,
+    color: Colors.text,
+  },
+  label: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    paddingBottom: 16,
+    color: Colors.text,
+  },
+  message: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 4,
+    textAlign: 'center',
+  },
+  steps: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 16,
+    flexDirection: 'row',
+  },
+  stepstext: {
+    color: Colors.text,
+    padding: 8,
+  },
+});
+

app/mobile/yarn.lock

@@ -1771,6 +1771,15 @@
   dependencies:
     nanoid "^3.1.23"
 
+"@react-navigation/stack@^6.3.14":
+  version "6.3.14"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.14.tgz#de282d8bc5616bfb12fa4c89f18792193563fb7a"
+  integrity sha512-a1ivkESWsZYimUQHr3TA2Nu2g3FALEyJqQ8bJxXkEcBp+5cglOakhfKbbCuNV2knC/9zjUmP9N0Q3Jh3fK9nfw==
+  dependencies:
+    "@react-navigation/elements" "^1.3.15"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@remix-run/router@1.3.2":
   version "1.3.2"
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz"
@@ -6163,6 +6172,11 @@ react-devtools-core@^4.26.1:
     shell-quote "^1.6.1"
     ws "^7"
 
+react-freeze@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
+  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
@@ -6237,6 +6251,14 @@ react-native-safe-area-context@^4.5.0:
   resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz"
   integrity sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ==
 
+react-native-screens@^3.20.0:
+  version "3.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.20.0.tgz#4d154177395e5541387d9a05bc2e12e54d2fb5b1"
+  integrity sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==
+  dependencies:
+    react-freeze "^1.0.0"
+    warn-once "^0.1.0"
+
 react-native-sqlite-storage@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/react-native-sqlite-storage/-/react-native-sqlite-storage-6.0.1.tgz"

net/web/src/session/welcome/Welcome.jsx

@@ -18,7 +18,7 @@ export function Welcome() {
           <RightOutlined />
           <div>Connect with people</div>
           <RightOutlined />
-          <div>Start a conversation topic</div>
+          <div>Start a conversation</div>
         </Space>
       </div>
     </WelcomeWrapper>