Refactor App component to include a splash screen and home screen; remove unused BootSplash theme and colors. Add SplashScreen and Home components.

App.tsx

@@ -1,51 +1,38 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import { NewAppScreen } from '@react-native/new-app-screen';
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
 import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import RNBootSplash from 'react-native-bootsplash';
-import { useEffect } from 'react';
+  StatusBar,
+  StyleSheet,
+  View,
+  useColorScheme,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SplashScreen from './src/SplashScreen'; // create this file
+import Home from './src/screen/Home'; // your main screen
 
 function App() {
+  const isDarkMode = useColorScheme() === 'dark';
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    RNBootSplash.hide({ fade: true });
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
   }, []);
-  const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <SafeAreaProvider>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      {isLoading ? <SplashScreen /> : <Home />}
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
-
-  return (
-    <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
-      />
-    </View>
-  );
-}
+export default App;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
 });
-
-export default App;

android/app/src/main/AndroidManifest.xml

@@ -17,7 +17,7 @@
       android:launchMode="singleTask"
       android:windowSoftInputMode="adjustResize"
       android:exported="true"
-      android:theme="@style/BootTheme">
+      android:theme="@style/AppTheme">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />

android/app/src/main/res/values/colors.xml

@@ -1,3 +0,0 @@
-<resources>
-    <color name="bootsplash_background">#ffffff</color>
-</resources>

android/app/src/main/res/values/styles.xml

@@ -1,12 +1,7 @@
 <resources>
+
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     </style>
 
-    <style name="BootTheme" parent="Theme.BootSplash">
-        <item name="bootSplashBackground">@color/bootsplash_background</item>
-        <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
-        <item name="postBootSplashTheme">@style/AppTheme</item>
-    </style>
 </resources>

src/SplashScreen.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  ImageBackground,
+  StatusBar,
+} from 'react-native';
+
+const SplashScreen: React.FC = () => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 1200,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  return (
+    <>
+      <StatusBar hidden />
+
+      <ImageBackground
+        source={require('./assets/img/splash.png')}
+        style={styles.background}
+        resizeMode="cover" // IMPORTANT
+      >
+        <Animated.View
+          style={[
+            styles.overlay,
+            {
+              opacity: fadeAnim,
+            },
+          ]}
+        >
+          {/* Optional content */}
+          {/* <Text style={styles.title}>Your App Name</Text> */}
+        </Animated.View>
+      </ImageBackground>
+    </>
+  );
+};
+
+export default SplashScreen;
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1, // Full screen
+    width: '100%',
+    height: '100%',
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+});

src/screen/Home.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+const Home = () => {
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  );
+};
+
+export default Home;