adding app context to mobile app

app/client/mobile/App.tsx

@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+import { AppContextProvider } from './src/context/AppContext';
+
 import type {PropsWithChildren} from 'react';
 import {
   SafeAreaView,
@@ -63,36 +65,38 @@ function App(): React.JSX.Element {
   };
 
   return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <AppContextProvider>
+      <SafeAreaView style={backgroundStyle}>
+        <StatusBar
+          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+          backgroundColor={backgroundStyle.backgroundColor}
+        />
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={backgroundStyle}>
+          <Header />
+          <View
+            style={{
+              backgroundColor: isDarkMode ? Colors.black : Colors.white,
+            }}>
+            <Section title="Step One">
+              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
+              screen and then come back to see your edits.
+            </Section>
+            <Section title="See Your Changes">
+              <ReloadInstructions />
+            </Section>
+            <Section title="Debug">
+              <DebugInstructions />
+            </Section>
+            <Section title="Learn More">
+              Read the docs to discover what to do next:
+            </Section>
+            <LearnMoreLinks />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </AppContextProvider>
   );
 }
 

app/client/mobile/src/context/AppContext.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { useAppContext } from './useAppContext.hook';
+
+export const AppContext = createContext({});
+
+export function AppContextProvider({ children }) {
+  const { state, actions } = useAppContext();
+  return (
+    <AppContext.Provider value={{ state, actions }}>
+      {children}
+    </AppContext.Provider>
+  );
+}
+

app/client/mobile/src/context/useAppContext.hook.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+import { DatabagSDK } from 'databag-client-sdk';
+
+export function useAppContext() {
+  const [state, setState] = useState({
+  });
+
+  useEffect(() => {
+    console.log("IN APP CONTEXT");
+  }, []);
+
+  const actions = {
+  }
+
+  return { state, actions }
+}
+