Feature: Splash and Welcome screens

SpashScreen/Splash.tsx

@@ -0,0 +1,56 @@
+import Loading from "@/app/spinner/Loading";
+import { Image, StyleSheet, Text, View } from "react-native";
+
+
+
+export default function SplashScreen(){
+    return (
+        <>
+        <View style={styles.container}>
+            <View style={styles.splash}>
+                <View>
+                <View>
+                <Image source={require('../assets/images/icon.png')}/>
+                </View>
+                </View>
+
+       <View>
+       <Text style={styles.text}>Medica</Text>
+       </View>
+    <View style={styles.spin}>
+    <Loading/>
+    </View>
+
+
+            </View>
+
+        </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    container:{
+flex:1,
+justifyContent:'center',
+alignItems:'center',
+backgroundColor:'#ffff'
+    },
+    splash:{
+        flex:1,
+        flexDirection:'row',
+        justifyContent:'center',
+        alignItems:'center',
+        backgroundColor:'white',
+        gap:20,
+        width:'100%'
+    },
+    text:{
+        fontSize:30
+    },
+    spin:{
+        position:'absolute',
+        bottom: 50
+
+    }
+})

app.json

@@ -7,11 +7,7 @@
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "userInterfaceStyle": "dark",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
+
     "assetBundlePatterns": [
       "**/*"
     ],

app/(app)/HomeScreen.tsx

@@ -1,5 +1,62 @@
-interface Props {}
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import Typography from "@/constants/Typography";
+import Colors from "@/constants/Colors";
 
-export default function HomeScreen({}: Props) {
-  return <></>;
+
+export default function HomeScreen(){
+    return (
+        <>
+        <View style={styles.container}>
+
+              <View style={styles.image}>
+              <Image source={require('../../assets/images/Group.png')} style={styles.imagex}/>
+              </View>
+
+<View>
+<Text style={styles.text}>Welcome to Medica! 👋</Text>
+<Text style={styles.description}>The best online doctor appointment & consultation app of the century for your health and medical needs!</Text>
+</View>
+
+
+            </View>
+
+        </>
+    )
 }
+
+const styles = StyleSheet.create({
+    container:{
+flex:1,
+justifyContent:'center',
+alignItems:'center',
+backgroundColor:'#ffff',
+paddingTop:50,
+paddingBottom:70
+    },
+
+    text:{
+        fontSize:40,
+        textAlign:'center',
+        paddingLeft:30,
+paddingRight:30,
+color:'#236bfd',
+fontFamily:'Bold',
+    },
+    description:{
+textAlign:'center',
+lineHeight:25,
+paddingBottom:30,
+paddingTop:20,
+fontFamily:'Regular',
+color:Colors.light.text,
+fontSize:17
+    },
+    image:{
+        // width: '100%',
+        objectFit:'cover',
+      height:'70%' 
+    },
+    imagex:{
+      height:'100%'
+    }
+})

app/Onboading/OnboardingScreen.tsx

@@ -0,0 +1,61 @@
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import Typography from "@/constants/Typography";
+import Colors from "@/constants/Colors";
+
+
+export default function OnboardingScreen(){
+    return (
+        <>
+        <View style={styles.container}>
+            <Text>OnboardingScreen</Text>
+        </View>
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    container:{
+flex:1,
+justifyContent:'center',
+alignItems:'center',
+backgroundColor:'#ffff',
+// paddingTop:80
+    },
+    splash:{
+        flex:1,
+
+        justifyContent:'center',
+        alignItems:'center',
+backgroundColor:'white',
+gap:20,
+width:'100%',
+resizeMode:'cover',
+
+
+    },
+    text:{
+        fontSize:40,
+        textAlign:'center',
+        paddingLeft:30,
+paddingRight:30,
+color:'#236bfd',
+fontFamily:'Bold',
+    },
+    textx:{
+textAlign:'center',
+lineHeight:25,
+paddingBottom:30,
+paddingTop:20,
+fontFamily:'Regular',
+color:Colors.light.text,
+fontSize:17
+    },
+    image:{
+        // width: '100%',
+        objectFit:'cover',
+      height:'70%' 
+    },
+    imagex:{
+      height:'100%'
+    }
+})

app/_layout.tsx

@@ -13,16 +13,15 @@ import { useEffect, useState } from "react";
 import { useColorScheme } from "@/components/useColorScheme";
 
 export {
-  // Catch any errors thrown by the Layout component.
+
   ErrorBoundary,
 } from "expo-router";
 
 export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
+
   initialRouteName: "(auth)",
 };
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
@@ -34,7 +33,6 @@ export default function RootLayout() {
     ...FontAwesome.font,
   });
 
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
     if (error) throw error;
   }, [error]);
@@ -59,6 +57,7 @@ function RootLayoutNav() {
     <ThemeProvider value={colorScheme === "light" ? DarkTheme : DefaultTheme}>
       <Stack initialRouteName="(auth)">
         <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+        <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
     </ThemeProvider>

app/index.tsx

@@ -1,17 +1,44 @@
-import { Text } from "@/components/Themed";
-import { router } from "expo-router";
-import { useEffect } from "react";
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import HomeScreen from './(app)/HomeScreen';
+import SplashScreen from '@/SpashScreen/Splash';
+import { useEffect, useState } from 'react';
+import OnboardingScreen from './Onboading/OnboardingScreen';
+
+export default function App() {
+  const [showSplash, setShowSplash] = useState(true);
+  const [showHome, setShowHome] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  useEffect(() => {
+
+    const splashTimeout = setTimeout(() => {
+      setShowSplash(false);
+      setShowHome(true);
+    }, 3000);
+
+
+    return () => clearTimeout(splashTimeout);
+  }, []);
 
-export default function Index() {
   useEffect(() => {
-    setTimeout(() => {
-      router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
-    }, 2000);
-  });
+    if (showHome) {
+
+      const homeTimeout = setTimeout(() => {
+        setShowHome(false);
+        setShowOnboarding(true);
+      }, 5000); 
+
+
+      return () => clearTimeout(homeTimeout);
+    }
+  }, [showHome]);
 
   return (
     <>
-      <Text>Onboarding Screen</Text>
+      {showSplash && <SplashScreen />}
+      {showHome && <HomeScreen />}
+      {showOnboarding && <OnboardingScreen />} 
     </>
   );
 }

app/spinner/Loading.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+// import { ActivityIndicator,MD2Colors } from 'react-native-paper';
+
+import {
+  BallIndicator,
+  BarIndicator,
+  DotIndicator,
+  MaterialIndicator,
+  PacmanIndicator,
+  PulseIndicator,
+  SkypeIndicator,
+  UIActivityIndicator,
+  WaveIndicator,
+} from 'react-native-indicators';
+
+const Loading = () => (
+  <View style={[styles.container, styles.horizontal]}>
+
+<BallIndicator animating={true} color={'#236bfd'}/>
+
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10,
+  },
+  spiner:{
+fontSize:30
+  }
+});
+
+export default Loading;