how to replace splash screen with drawer screen in react-native? - react-native

Question

I want to have a splash screen and a home screen that contains drawer.
I'm facing some issue here.
The below is my stack navigator.
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import SplashScreen from '../Screens/SplashScreen';
import HomeScreen from '../Screens/HomeScreen';
import DrawerNavigator from './DrawerNavigator';
const Stack = createNativeStackNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Splash" component={SplashScreen} />
<Stack.Screen name="Home" component={DrawerNavigator} />
</Stack.Navigator>
);
};
export default StackNavigator;
The splashScreen
import React, {useState, useEffect} from 'react';
import {View, Text} from 'react-native';
const SplashScreen = ({navigation}) => {
const [splashScreen, setSplashScreen] = useState(true);
const hideSplashScreen = () => {
setSplashScreen(false);
};
useEffect(() => {
const interval = setTimeout(() => {
hideSplashScreen();
navigation.replace('Home');
}, 5000);
return () => {
clearTimeout(interval);
};
}, []);
const renderSplash = () => {
return (
<View style={{padding: 100}}>
<Text>Welcome</Text>
</View>
);
};
return <View>{splashScreen === true && renderSplash()}</View>;
};
export default SplashScreen;
DrawerNavigator
import React from 'react';
import {createDrawerNavigator} from '#react-navigation/drawer';
import HomeScreen from '../Screens/HomeScreen';
import {LogBox} from 'react-native';
LogBox.ignoreLogs([
"[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
]);
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="HomeScreen" component={HomeScreen} />
</Drawer.Navigator>
);
};
export default DrawerNavigator;
HomeScreen
import React from 'react';
import {View, Text} from 'react-native';
const HomeScreen = () => {
return (
<View>
<Text>Hello!</Text>
</View>
);
};
export default HomeScreen;
App.js
import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '#react-navigation/native';
import StackNavigator from './navigation/StackNavigator';
import Icon from 'react-native-vector-icons/Ionicons';
Icon.loadFont().then();
const App = () => {
return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
};
export default App;
On the homeScreen header of Stack navigation is shown up with title Home. Below that header of drawer Navigation is showing up.
I just want to see drawer on the home screen. How to achieve this? Am I doing it correctly?

Answer 1

I understand that you need to show a splash screen when the user enters the app.
What's wrong in it?
Splash screen should be shown when your app bundle & assets are loading. If you are mounting your splash screen inside the App component, the splash screen will be showing after the bundle and asset loading.
Recommended
Try to use react-native-splash-screen library.
Follow this blog