Showing an independent screen before navigation container ReactNative

Question

I have a navigation container with three bottom tabs you can switch:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Setting" component={SettingScreen} />
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Cart" component={CartScreen} />

      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

How can I add a completely independent screen before showing this navigation? I mean when you open the app the independent screen shows for like 5 seconds (something like a loading screen) then the navigation screen displays.

Answer 1

If you're looking for a splash screen - ie a loading screen for the whole app - the library react-native-splash-screen is pretty popular, or you can see how they did it and make your own.

If you want to show a different screen as part of your navigation stack, create a stack that holds your tab navigator and the new screen, and then make the new screen the initial route of your parent stack. You can read a guide to nesting navigators here: Nesting Navigators