React Native Navigation wont show initial component

I’ve recently started a college project on a react native app, and I’ve implemented react navigation, but the problem is that, the main component literally just flashes for a millisecond and just disappears when I try to run the app. Here is the code:

import { StyleSheet, Text, View } from 'react-native';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import { NavigationContainer, StackActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

export default function App() {
  return (
    <View style={styles.container}>
        <Stack.Navigator initialRouteName="Welcome">
          <Stack.Screen name="Welcome" component = {WelcomeScreen} />
      <View style = {}>
        <Text style = {styles.creditText}>Developed by Nabih Amer & Ashraf Kherbawy.</Text>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#373546',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  credit: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  creditText: {
    fontSize: 10,
    color: '#9f99b6',
    paddingBottom: 4,

The WelcomeScreen component literally just flashes for a second on the web app and disappears, I also checked in the expo app and it does the same thing.


The concept of stack navigator is to show and navigate among different screen. So don’t couple it with view elements. Try having different views as screens and use them as Stack.Screen