ft(onBoarding): resolve conflict to merge on develop

app/index.tsx

@@ -1,14 +1,14 @@
-import { Text } from "@/components/Themed";
+import { Text, View, StyleSheet } from "react-native"
 import { router } from "expo-router";
 import { useEffect } from "react";
 import FirstScreen from "./onBoarding/FirstScreen";
 
 export default function Index() {
-  useEffect(() => {
-    setTimeout(() => {
-      router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
-    }, 2000);
-  });
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
+  //   }, 2000);
+  // });
 
   return (
     <View style={styles.container}>
@@ -17,3 +17,11 @@ export default function Index() {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+})

app/onBoarding/FirstScreen.tsx

@@ -9,11 +9,12 @@ const darkImg = require("../../assets/images/OnBoardingImages/firstDarkImg.png")
 
 const FirstScreen = () => {
     const {theme, changeTheme} = useContext(ThemeContext)
+    console.log(theme)
 
    return (
     <View style={styles.container}>
           <OnboardingComponent 
-        image={theme === "dark" ? darkImg : image}
+        image={theme === "light" ? image : darkImg}
         text="Thousands of    doctors & experts to help your health!"
         action="Next"
         direction="/onBoarding/SecondScreen"

app/onBoarding/SecondScreen.tsx

@@ -13,7 +13,7 @@ const SecondScreen = () => {
    return (
     <View>
         <OnboardingComponent 
-        image={theme === "dark" ? darkImg : image}
+        image={theme === "light" ? image : darkImg}
         text="Health checks & consultations easily anywhere anytime"
         action="Next"
         direction="/onBoarding/ThirdScreen">

app/onBoarding/ThirdScreen.tsx

@@ -5,7 +5,7 @@ import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent'
 import { ThemeContext } from '@/ctx/ThemeContext'
 
 const image = require("../../assets/images/OnBoardingImages/thirdLightImg.png")
-const darkImg = require("../../assets/images/OnBoardingImages/thirdDarkImg.png")
+const darkImg = require("../../assets/images/OnBoardingImages/thirdDarkImg.png.png")
 
 
 const ThirdScreen = () => {
@@ -14,7 +14,7 @@ const ThirdScreen = () => {
    return (
     <View style={styles.container}>
             <OnboardingComponent 
-        image={ theme=== "dark" ? darkImg : image}
+        image={theme === "light" ? image : darkImg}
         text="Let's start living healthy and well with us right now!"
             action="Get Started"
             direction="/"

components/OnBoarding/OnboardingComponent.tsx

@@ -33,7 +33,7 @@ const OnboardingComponent = ({
         <Image source={image} />
       </View>
       <View style={styles.LowerSection}>
-        <Text style={theme === "light" ? styles.titleDark : styles.titleLight}>
+        <Text style={theme === "light" ?  styles.titleLight : styles.titleDark}>
           {text}
         </Text>
         <View style={{ flexDirection: "row", alignSelf: "center" }}>