Onboarding screen

App.js

@@ -1,11 +1,16 @@
-import React from "react";
-import { NativeBaseProvider, Text, Box, extendTheme } from "native-base";
+import React, { useCallback, useEffect, useState } from "react";
+import * as SplashScreen from "expo-splash-screen";
+import { NativeBaseProvider, extendTheme } from "native-base";
 import theme from "./helpers/themeConfig";
 import { useFonts } from "expo-font";
-import CustomButton from "./components/Button";
+import { View } from "react-native";
+import LoadingScreen from "./screens/LoadingScreen";
+import Navigation from "./navigation/Navigation";
+
 //
 //
 export default function App() {
+    const [appIsReady, setAppIsReady] = useState(false);
     // Load the theme config
     const customTheme = extendTheme({
         ...theme,
@@ -20,25 +25,45 @@ export default function App() {
         light: require("./assets/fonts/Georama-Light.ttf"),
     });
     //
-    // Check if the fonts are loaded
-    if (!fontsLoaded) {
-        return null;
+    useEffect(() => {
+        async function prepare() {
+            try {
+                // Artificially delay for two seconds to simulate a slow loading
+                await new Promise((resolve) => setTimeout(resolve, 2000));
+            } catch (e) {
+                console.warn(e);
+            } finally {
+                // Tell the application to render
+                setAppIsReady(true);
+            }
+        }
+        prepare();
+    }, []);
+
+    const onLayoutRootView = useCallback(async () => {
+        if (appIsReady) {
+            // This tells the splash screen to hide immediately! If we call this after
+            // we hide the splash screen once we know the root view has already
+            // performed layout.
+            await SplashScreen.hideAsync();
+        }
+    }, [appIsReady]);
+    //
+    // Check if the fonts are loaded and app is ready
+    if (!appIsReady || !fontsLoaded) {
+        return <LoadingScreen />;
     }
     //
     return (
         <NativeBaseProvider theme={customTheme}>
-            <Box
-                flex={1}
-                bg="white"
-                alignItems="center"
-                justifyContent="center"
-                p="5"
+            <View
+                style={{
+                    flex: 1,
+                }}
+                onLayout={onLayoutRootView}
             >
-                <Text fontFamily="light" color="text.main">
-                    Open up App.js to start working on your app!
-                </Text>
-                <CustomButton isLoading={true} isIcon={true} title={"Submit"} />
-            </Box>
+                <Navigation />
+            </View>
         </NativeBaseProvider>
     );
 }

app.json

@@ -1,33 +1,31 @@
 {
-  "expo": {
-    "name": "handficial",
-    "slug": "handficial",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
-      }
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
+    "expo": {
+        "name": "handficial",
+        "slug": "handficial",
+        "version": "1.0.0",
+        "orientation": "portrait",
+        "icon": "./assets/icon.png",
+        "userInterfaceStyle": "light",
+        "splash": {
+            "image": "./assets/splash.png",
+            "resizeMode": "contain",
+            "backgroundColor": "#ffffff"
+        },
+        "updates": {
+            "fallbackToCacheTimeout": 0
+        },
+        "assetBundlePatterns": ["**/*"],
+        "ios": {
+            "supportsTablet": true
+        },
+        "android": {
+            "adaptiveIcon": {
+                "foregroundImage": "./assets/adaptive-icon.png",
+                "backgroundColor": "#FFFFFF"
+            }
+        },
+        "web": {
+            "favicon": "./assets/favicon.png"
+        }
     }
-  }
 }

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+        plugins: ["react-native-reanimated/plugin"],
+    };
 };

components/Input.js

@@ -3,7 +3,7 @@ import { TextInput, StyleSheet } from "react-native";
 import { View, Text } from "native-base";
 import PropTypes from "prop-types";
 
-import COLORS from "./constants";
+import COLORS from "../helpers/constants";
 import Ionicons from "@expo/vector-icons/Ionicons";
 
 const CustomInput = ({

navigation/Navigation.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import OnboardingScreen from "../screens/OnboardingScreen";
+//
+// create Navigation
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+//
+//
+const Navigation = () => {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator screenOptions={{ headerShown: false }}>
+                <Stack.Screen name="OnboardingScreen">
+                    {(drawerProps) => (
+                        <OnboardingScreen
+                            {...drawerProps}
+                            setIsAppFirstLaunched={() => dispatch(onboard())}
+                        />
+                    )}
+                </Stack.Screen>
+            </Stack.Navigator>
+        </NavigationContainer>
+    );
+};
+
+export default Navigation;

package.json

@@ -10,13 +10,20 @@
   },
   "dependencies": {
     "@expo/vector-icons": "13.0.0",
+    "@react-navigation/drawer": "^6.5.6",
+    "@react-navigation/native": "^6.1.1",
+    "@react-navigation/stack": "^6.3.10",
+    "babel-preset-expo": "^9.2.2",
     "expo": "~47.0.9",
     "expo-font": "~11.0.1",
+    "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
     "native-base": "^3.4.25",
     "prop-types": "^15.8.1",
     "react": "18.1.0",
     "react-native": "0.70.5",
+    "react-native-gesture-handler": "~2.8.0",
+    "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-svg": "13.4.0"
   },

screens/LoadingScreen.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Image, Center, NativeBaseProvider } from "native-base";
+const logo = require("../assets/logo.png");
+
+const LoadingScreen = () => {
+    return (
+        <NativeBaseProvider>
+            <Center flex={1}>
+                <Image
+                    source={logo}
+                    ml="2"
+                    alt="LoadingScreen"
+                    style={{
+                        height: 50,
+                        width: 50,
+                        resizeMode: "contain",
+                    }}
+                />
+            </Center>
+        </NativeBaseProvider>
+    );
+};
+
+export default LoadingScreen;

screens/OnboardingScreen.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Text } from "native-base";
+import { ImageBackground, SafeAreaView } from "react-native";
+
+//
+//
+const OnboardingScreen = () => {
+    const [bg, setBg] = useState(1);
+    const logo =
+        bg === 0
+            ? require("../assets/splash1.png")
+            : bg === 1
+            ? require("../assets/splash2.png")
+            : require("../assets/splash3.png");
+
+    return (
+        <ImageBackground style={{ flex: "1" }} source={logo} resizeMode="cover">
+            <SafeAreaView style={{ flex: "1" }}>
+                <Text>Inside</Text>
+            </SafeAreaView>
+        </ImageBackground>
+    );
+};
+
+export default OnboardingScreen;