Added app splash screen

Author: Infinite-Null

App.tsx

@@ -3,6 +3,8 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { RootRoute } from "./Route/RootRoute";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { VideoPlayerScreen } from "./Route/VideoPlayerScreen";
+import { InitialScreen } from "./Route/InitialRoute";
+import { ContextState } from "./GlobalState/ContextState";
 function App()  {
   const Stack = createNativeStackNavigator()
   const MyTheme = {
@@ -18,12 +20,15 @@ function App()  {
   };
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-    <NavigationContainer theme={MyTheme}>
-      <Stack.Navigator screenOptions={{headerShown:false}}>
-        <Stack.Screen  name="MainRoute" component={RootRoute} />
-        <Stack.Screen  name="VideoPlayer" component={VideoPlayerScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
+   <ContextState>
+     <NavigationContainer theme={MyTheme}>
+       <Stack.Navigator screenOptions={{headerShown:false}}>
+         <Stack.Screen  name="InitialRoute" component={InitialScreen} />
+         <Stack.Screen  name="MainRoute" component={RootRoute} />
+         <Stack.Screen  name="VideoPlayer" component={VideoPlayerScreen} />
+       </Stack.Navigator>
+     </NavigationContainer>
+   </ContextState>
     </GestureHandlerRootView>
   );
 }

GlobalState/Context.jsx

@@ -0,0 +1,5 @@
+import {createContext} from "react";
+
+const Context = createContext()
+
+export default Context

GlobalState/ContextState.jsx

@@ -0,0 +1,53 @@
+import Context from "./Context";
+import { useCallback, useEffect, useState } from "react";
+import { getAiringScheduleAnime, getPopularAnime, getTrendingAnime } from "../Api/AnimeData";
+export const ContextState = (props)=>{
+  const [TrendingLoading, setTrendingLoading] = useState(true);
+  const [PopularLoading, setPopularLoading] = useState(true);
+  const [AirngLoading, setAirngLoading] = useState(true);
+  const [Trending, setTrending] = useState([]);
+  const [Popular, setPopular] = useState([]);
+  const [Airing, setAiring] = useState([]);
+  const GetTrending = useCallback(async function GetTrending(){
+    try {
+      const data = await getTrendingAnime()
+      setTrending(data.results)
+    } catch (e) {
+      console.warn("Error in getting Trending Anime", e);
+    }
+    setTrendingLoading(false)
+  }, []);
+
+  const GetPopular = useCallback( async function GetPopular(){
+    try {
+      const data = await getPopularAnime()
+      setPopular(data.results)
+    } catch (e) {
+      console.warn("Error in getting Popular Anime", e);
+    }
+    setPopularLoading(false)
+  },[])
+
+  const GetAiring = useCallback( async function GetAiring(){
+    try {
+      const data = await getAiringScheduleAnime()
+      setAiring(data.results)
+    } catch (e) {
+      console.warn("Error in getting Airing Anime", e);
+    }
+    setAirngLoading(false)
+  },[])
+  useEffect(()=>{
+    GetTrending()
+    GetPopular()
+    GetAiring()
+  },[])
+  return <Context.Provider value={{TrendingLoading,
+    PopularLoading,
+    AirngLoading,
+    Trending,
+    Popular,
+    Airing}}>
+    {props.children}
+  </Context.Provider>
+}

Route/Home/Home.jsx

@@ -3,64 +3,31 @@ import Crousel from "../../Components/Home/TopCrousel/Crousel";
 import { ScrollView } from "react-native";
 import { Spacer } from "../../Components/Global/Spacer";
 import { Sections } from "../../Components/Home/Sections/Sections";
-import { useCallback, useEffect, useState } from "react";
-import { getAiringScheduleAnime, getPopularAnime, getTrendingAnime } from "../../Api/AnimeData";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { getContinueWatching } from "../../LocalStorage/ContinueWatching";
+import Context from "../../GlobalState/Context";
 
 export const Home = ({navigation}) => {
-  const [TrendingLoading, setTrendingLoading] = useState(true);
-  const [PopularLoading, setPopularLoading] = useState(true);
-  const [AirngLoading, setAirngLoading] = useState(true);
+  const {TrendingLoading,
+    PopularLoading,
+    AirngLoading,
+    Trending,
+    Popular,
+    Airing} = useContext(Context)
   const [ContinueWatchingLoading, setContinueWatchingLoading] = useState(true);
-  const [Trending, setTrending] = useState([]);
-  const [Popular, setPopular] = useState([]);
-  const [Airing, setAiring] = useState([]);
   const [ContinueWatching, setContinueWatching] = useState([]);
 
-  const GetTrending = useCallback(async function GetTrending(){
-    try {
-      const data = await getTrendingAnime()
-      setTrending(data.results)
-    } catch (e) {
-      console.warn("Error in getting Trending Anime", e);
-    }
-    setTrendingLoading(false)
-  }, []);
-
-  const GetPopular = useCallback( async function GetPopular(){
-  try {
-    const data = await getPopularAnime()
-    setPopular(data.results)
-  } catch (e) {
-    console.warn("Error in getting Popular Anime", e);
-  }
-  setPopularLoading(false)
-},[])
-
-const GetAiring = useCallback( async function GetAiring(){
-    try {
-      const data = await getAiringScheduleAnime()
-      setAiring(data.results)
-    } catch (e) {
-      console.warn("Error in getting Airing Anime", e);
-    }
-    setAirngLoading(false)
-},[])
-
 const GetContinueWatching = useCallback(async function GetContinueWatching(){
     try {
       const data = await getContinueWatching()
       setContinueWatching(data)
     } catch (e) {
       console.warn("Error in getting Continue Watching Anime", e);
-    }finally {
+    } finally {
       setContinueWatchingLoading(false)
     }
   },[])
   useEffect(()=>{
-    GetTrending()
-    GetPopular()
-    GetAiring()
     GetContinueWatching()
   },[])
   return (<MainWrapper>

Route/InitialRoute.jsx

@@ -0,0 +1,39 @@
+import Animated, { FadeIn } from "react-native-reanimated";
+import { View } from "react-native";
+import { MainWrapper } from "../Layout/MainWrapper";
+import { useTheme } from "@react-navigation/native";
+import { useEffect } from "react";
+import FastImage from "react-native-fast-image";
+
+export const InitialScreen = ({navigation}) => {
+  const theme = useTheme()
+  async function InitialCall(){
+      navigation.replace("MainRoute")
+  }
+  useEffect(() => {
+    setTimeout(() => {InitialCall()}, 820)
+  }, []);
+  return (
+    <MainWrapper>
+      <View style={{
+        flex:1,
+        alignItems:"center",
+        justifyContent:"center",
+      }}>
+        <FastImage source={require("../assets/AppImages/nekoJump.gif")} style={{
+          height:200,
+          width:200,
+        }} resizeMode={FastImage.resizeMode.stretch}/>
+        <Animated.Text entering={FadeIn.delay(100).duration(300)} style={{
+          fontSize:40,
+          color:theme.colors.text,
+          fontWeight:500,
+        }}>Nekoflix</Animated.Text>
+        <Animated.Text entering={FadeIn.delay(300)} style={{
+          fontSize:15,
+          color:theme.colors.primary,
+        }}>Anime for you.</Animated.Text>
+      </View>
+    </MainWrapper>
+  );
+};