react-navigation native-stack Stack Navigator Screen keep blank

user_2902510 0
Viewed 757

I was following the React navigation to create the pages, however, I only get the blank page when I build the application.

https://reactnavigation.org/docs/hello-react-navigation

React navigation version

"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",

Here is my full code on App.js On this page, I created 3 function: HomeSc, HomeScCheck, DetailSc. Only the HomeScCheck can show on the screen.

import * as React from 'react';
import { View, Text , SafeAreaView} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function HomeScCheck() {
  return (
    <View><Text style={{color:"red"}}>Home Screen Check</Text></View>
  );
}

function HomeSc() {
  return (
    <View><Text>Home Screen</Text></View>
  );
}

function DetailSc() {
  return (
    <View style={{ flex: 1}}>
      <Text style={{color: '#333', fontSize:30}}>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <SafeAreaView>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeSc} />
          <Stack.Screen name="Detail" component={DetailSc}   options={{ title: 'Overview' }} />
        </Stack.Navigator>
      </NavigationContainer>
      <HomeScCheck/>  
    </SafeAreaView>
  );
}

export default App;

enter image description here

react-native navigation
2 Answers

As you were saying that you want to see the HomeScCheck screen as the first screen, you should see when the app is run.

So, to do that your code should look as the following code.

import { View, Text, SafeAreaView } from 'react-native';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScCheck() {
  return (
    <View>
      <Text style={{ color: 'red' }}>Home Screen Check</Text>
    </View>
  );
}

function HomeSc() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailSc() {
  return (
    <View style={{ flex: 1 }}>
      <Text style={{ color: '#333', fontSize: 30 }}>Detail Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home Check" component={HomeScCheck} />
        <Stack.Screen name="Home" component={HomeSc} />
        <Stack.Screen
          name="Detail"
          component={DetailSc}
          options={{ title: 'Overview' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

So, What I have done is that I have removed the <safeareaview> and <HomeScCheck> and I have created another <Stack.Screen> above the home <Stack.Screen>. Though this tells that the first <Stack.Screen> will be the first screen of the stack navigator.

user_171663100

Kindly remove safeAreaView and statusbar from the App.js file only put Navigation inside the return

user_193655110
Related