React native Question posted in
The official React Native documentation can be found here.

React native – Nothing is shown on the screen with react navigation in Expo

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

Tags:

2

Answers


  1. 0

    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>
    );
}
    Login or Signup to reply.
  2. 0

    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',
    },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search