TypeError : Object (...) is not a function react native stack navigation

user_16430644 0
Viewed 476

I make an app with react native. I install all packages required to use stack navigation. But when I opened my project with the expo on the web. I got this error you see this in the image.

// In App.js in a new project

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 style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

export default App;

Please Help I trying to solve this for two days please help me I got this error every time. Error Screenshot1

react-navigation react-native reactjs javascript
2 Answers

Use import {createStackNavigator} from '@react-navigation/stack'; instead of import { createNativeStackNavigator } from '@react-navigation/native-stack';

Try this code:

import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

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

const Stack = createStackNavigator();

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

export default App;
user_169246320

Use this, it worked for me:

import { createStackNavigator } from "react-navigation-stack"
user_121345770
Related