feat: create and share auth context

App.tsx

@@ -4,6 +4,8 @@ import { GluestackUIProvider } from '@gluestack-ui/themed';
 
 import { config } from './config/gluestack-ui.config';
 
+import { AuthContext } from '@contexts/AuthContext';
+
 import { Loading } from '@components/Loading';
 import { Routes } from '@routes/index';
 
@@ -15,16 +17,16 @@ export default function App() {
 
   return (
     <GluestackUIProvider config={config}>
-      {fontsLoaded ? (
-        <Routes />
-      ) : (
-        <Loading />
-      )}
-      <StatusBar
-        barStyle="light-content"
-        backgroundColor="transparent"
-        translucent
-      />
+      <AuthContext.Provider
+        value={{
+          id: '1',
+          name: 'John Doe',
+          email: 'john.doe@email.com',
+          avatar: 'https://i.pravatar.cc/200',
+        }}>
+        {fontsLoaded ? <Routes /> : <Loading />}
+      </AuthContext.Provider>
+      <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
     </GluestackUIProvider>
   );
 }

src/contexts/AuthContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AuthContext = createContext({});

src/routes/index.tsx

@@ -1,13 +1,18 @@
+import { useContext } from 'react';
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { Box } from '@gluestack-ui/themed';
 
 import { AuthRoutes } from './auth.routes';
 import { AppRoutes } from './app.routes';
 
+import { AuthContext } from '@contexts/AuthContext';
+
 import { gluestackUIConfig } from '../../config/gluestack-ui.config';
 
 export function Routes() {
   const theme = DefaultTheme;
+  const contextData = useContext(AuthContext);
+
   theme.colors.background = gluestackUIConfig.tokens.colors.gray700;
 
   return (