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,6 +345,33 @@ export function Session() {
   const [cardsActive, setCardsActive] = useState(false);
 
   return (
+    <View style={styles.body}>
+      { state.firstRun == true && (
+        <View style={styles.firstRun}>
+          <View style={styles.title}>
+            <Text style={styles.titleText}>Welcome To Databag</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>
+        </View>
+      )}
+      { state.firstRun == false && (
         <View style={styles.container}>
           { state.tabbed === false && (
             <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }}
@@ -381,6 +409,8 @@ export function Session() {
           )}
           <StatusBar barStyle="dark-content" backgroundColor={Colors.formBackground} /> 
         </View>
+      )}
+    </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 };