How to use React navigation as a component

user_17104990 0
Viewed 86

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;
react-navigation react-native javascript
1 Answers

Hope this Solution Work.

Imp Points

  1. NavigationContainer must wrap all navigators structure.
  2. 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 :
Click & Read Official Doc

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 Will Work :)
Demo

user_120538520
Related