How to use React navigation as a component-CodePudding

Hello Guys am trying to use ViewCart file as a component in my project but its not showing , don't know why? but when I wrote it on whole code in my App.js file its working fine. please tell me why its happening, and also tell how to use Viewcart file as a component in in my project. if you have any query please free feel to ask.

// ViewCart.js

This file i want to use in my App.js file as a component

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

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

const Stack = createNativeStackNavigator();

function ViewCart() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default ViewCart;

App.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import ViewCart from "./screens/ViewCart";

function App() {
  return (
    <View style={styles.container}>
      <ViewCart />
      {/* <StatusBar style="auto" /> */}
    </View>
  );
}
const styles = StyleSheet.create({
  // container: {
  //   flex: 1,
  //   backgroundColor: "#fff",
  //   alignItems: "center",
  //   justifyContent: "center",
  // },
});

export default App;

CodePudding user response：

Hope this Solution Work.

Imp Points

NavigationContainer must wrap all navigators structure.
NavigationContainer will be add in the root of our app.

Just remove NavigationContainer from ViewCart.js and add NavigationContainer in the App.js.

You can read official Doc :
https://reactnavigation.org/docs/hello-react-navigation#creating-a-native-stack-navigator

ViewCart.js

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

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

const Stack = createNativeStackNavigator();

function ViewCart() {
  return (
     <>
      <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
     </>
  );
 }

export default ViewCart;

App.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';

import ViewCart from "./ViewCart";

function App() {
  return (
      <NavigationContainer style={styles.container}>
        <ViewCart />
        {/* <StatusBar style="auto" /> */}
      </NavigationContainer>
   );
 }

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

export default App;

Hope this Work :)