show first run splash

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 = 'databag_v045.db';
+const DATABAG_DB = 'databag_v046.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});
@@ -44,6 +44,15 @@ export function useStoreContext() {
       const dataId = `${guid}_profile`;
       await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [dataId, encodeObject(profile)]);
     },
+    getFirstRun: async (guid) => {
+      const dataId = `${guid}_first_run`;
+      const firstRun = await getAppValue(db.current, dataId, { set: true });
+      return firstRun.set;
+    },
+    setFirstRun: async (guid) => {
+      const dataId = `${guid}_first_run`;
+      await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [dataId, encodeObject({ set: false })]);
+    },
     getCardRequestStatus: async (guid) => {
       const dataId = `${guid}_card_status`;
       return await getAppValue(db.current, dataId, {});

app/mobile/src/session/Session.jsx

@@ -1,4 +1,4 @@
-import { View, TouchableOpacity, StatusBar, Text } from 'react-native';
+import { View, TouchableOpacity, StatusBar, Text, Image } from 'react-native';
 import { useState, useEffect, useContext } from 'react';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -24,6 +24,7 @@ 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();
@@ -344,42 +345,71 @@ export function Session() {
   const [cardsActive, setCardsActive] = useState(false);
 
   return (
-    <View style={styles.container}>
+    <View style={styles.body}>
-      { state.tabbed === false && (
+      { state.firstRun == true && (
-        <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
+        <View style={styles.firstRun}>
-          drawerContent={(props) => <Profile />}>
+          <View style={styles.title}>
-          <ProfileDrawer.Screen name="detail">
+            <Text style={styles.titleText}>Welcome To Databag</Text>
-            {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
+          </View>
-          </ProfileDrawer.Screen>
+          <Image style={styles.splash} source={splash} resizeMode="contain" />
-        </ProfileDrawer.Navigator>
+          <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>
+        </View>
       )}
-      { state.tabbed === true && (
+      { state.firstRun == false && (
-        <Tab.Navigator
+        <View style={styles.container}>
-          screenListeners={{ state: (e) => setCardsActive(e?.data?.state?.index === 2) }}
+          { state.tabbed === false && (
-          screenOptions={({ route }) => ({
+            <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
-            tabBarStyle: styles.tabBar,
+              drawerContent={(props) => <Profile />}>
-            headerShown: false,
+              <ProfileDrawer.Screen name="detail">
-            tabBarIcon: ({ focused, color, size }) => {
+                {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
-              if (route.name === 'Profile') {
+              </ProfileDrawer.Screen>
-                return <ProfileIcon size={size} color={color} />
+            </ProfileDrawer.Navigator>
-              }
+          )}
-              if (route.name === 'Conversation') {
+          { state.tabbed === true && (
-                return <Ionicons name={'message1'} size={size} color={color} />;
+            <Tab.Navigator
-              }
+              screenListeners={{ state: (e) => setCardsActive(e?.data?.state?.index === 2) }}
-              if (route.name === 'Contacts') {
+              screenOptions={({ route }) => ({
-                return <CardsIcon size={size} color={color} active={cardsActive} />;
+                tabBarStyle: styles.tabBar,
-              }
+                headerShown: false,
-            },
+                tabBarIcon: ({ focused, color, size }) => {
-            tabBarShowLabel: false,
+                  if (route.name === 'Profile') {
-            tabBarActiveTintColor: Colors.white,
+                    return <ProfileIcon size={size} color={color} />
-            tabBarInactiveTintColor: Colors.disabled,
+                  }
-          })}>
+                  if (route.name === 'Conversation') {
-          <Tab.Screen name="Conversation" component={ConversationStackScreen} />
+                    return <Ionicons name={'message1'} size={size} color={color} />;
-          <Tab.Screen name="Profile" component={ProfileStackScreen} />
+                  }
-          <Tab.Screen name="Contacts" component={ContactStackScreen} />
+                  if (route.name === 'Contacts') {
-        </Tab.Navigator>
+                    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>
       )}
-      <StatusBar barStyle="dark-content" backgroundColor={Colors.formBackground} /> 
     </View>
   );
 }

app/mobile/src/session/Session.styled.js

@@ -2,10 +2,64 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  body: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: Colors.formBackground,
+  },
   container: {
     width: '100%',
     height: '100%',
   },
+  firstRun: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: Colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  splash: {
+    width: '100%',
+    height: '100%',
+    maxWidth: '80%',
+    maxHeight: '50%',
+  },
+  steps: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  step: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 12,
+  },
+  titleText: {
+    color: Colors.white,
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  title: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  stepText: {
+    color: Colors.white,
+    paddingLeft: 16,
+    fontSize: 16,
+  },
+  start: {
+    marginTop: 16,
+    padding: 8,
+    backgroundColor: Colors.primary,
+    borderRadius: 4,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  startText: {
+    color: Colors.white,
+  },
   tabBar: {
     backgroundColor: Colors.primary,
   },

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

@@ -2,6 +2,7 @@ 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() {
 
@@ -11,8 +12,10 @@ export function useSession() {
     baseWidth: '33%',
     cardId: null,
     converstaionId: null,
+    firstRun: null,
   });
 
+  const store = useContext(StoreContext);
   const dimensions = useWindowDimensions();
   const navigate = useNavigate();
   const tabbed = useRef(null);
@@ -21,6 +24,15 @@ export function useSession() {
     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) {
@@ -43,7 +55,11 @@ export function useSession() {
   const actions = {
     setCardId: (cardId) => {
       updateState({ cardId });
-    }
+    },
+    clearFirstRun: () => {
+      updateState({ firstRun: false });
+      store.actions.setFirstRun();
+    },
   };
 
   return { state, actions };