feat: connection provider and splash component created

App.tsx

@@ -4,13 +4,16 @@ import {config} from './src/theme/config';
 
 import {NavigationContainer} from '@react-navigation/native';
 import OnBoardingNavigation from './src/navigation/OnBoarding';
+import {ConnectionProvider} from './src/providers/ConnectionProvider';
 
 function App(): React.JSX.Element {
   return (
     <GluestackUIProvider config={config}>
-      <NavigationContainer>
-        <OnBoardingNavigation />
-      </NavigationContainer>
+      <ConnectionProvider>
+        <NavigationContainer>
+          <OnBoardingNavigation />
+        </NavigationContainer>
+      </ConnectionProvider>
     </GluestackUIProvider>
   );
 }

src/components/Splash.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {Box} from '@gluestack-ui/themed';
+
+export const Splash = () => {
+  return <Box bg="$primary400" flex={1} />;
+};

src/providers/ConnectionProvider.tsx

@@ -0,0 +1,29 @@
+import React, {useContext, createContext} from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+interface ContextProps {
+  loading: boolean;
+}
+const ConnectionContext = createContext<ContextProps>({
+  loading: false,
+});
+
+export const ConnectionProvider = ({children}: Props) => {
+  return (
+    <ConnectionContext.Provider value={{loading: false}}>
+      {children}
+    </ConnectionContext.Provider>
+  );
+};
+
+export const useConnectionContext = () => {
+  const context = useContext(ConnectionContext);
+  if (context === undefined) {
+    throw new Error(
+      'useConnectionContext must be used within ConnectionProvider',
+    );
+  }
+  return context;
+};