Nothing is shown on the screen with react navigation in Expo

Question

I'm trying a simple routing with Expo and React Navigation, but it doesn't show anything on the screen.

This is my referral code

`import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import { View, Text } from 'react-native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function Home() {
    console.log('Home');
    return (
        <View>
            <Text>Home</Text>
        </View>
    );
}

function MyStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
    );
}
export default function Navigation() {
    return (
        <NavigationContainer>
            <MyStack />
        </NavigationContainer>
    );
}`

This is my App.js code

import 'react-native-gesture-handler';

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Navigation from './src/navigation/Navigation';

export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In this short piece of code, console.log() in the Home component runs and prints Home to the console, but nothing appears on the screen.

Below is the content of the package.json file

{
  "name": "new-dictionary",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I would be very happy if you help me. Thanks

Answer 1

The code works fine, but your 'Home' text is below the SafeAreaView, could you add this code and prove it?

function Home() {
    console.log('Home');
    return (
        <View style={styles.homeContainer}>
            <Text style={styles.homeText}>Home</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    homeContainer: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
    },
    homeText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});

Answer 2

It seems the text is hidden by the gap of SafeAreaView. If you update the Home Screen like this then you will see.

function Home() {
    console.log('Home');
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Home</Text>
        </View>
    );
}