Error: Can't find variable Stack, React Navigation

Question

I am trying to develop a todolist app using react native, for which I coded the home screen. I had following some docs, but it gives me this error. Please help. I have executed the commands in the following order.

 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 npm install @react-navigation/native

 npm install @react-navigation/stack

This is my code.

import React from 'react';
import { StyleSheet, Text, View ,Button} from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator} from '@react-navigation/stack';

class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state={}
  }
  render(){
    return(
      <View>
      <View style={{margin:50}}>
        <Button title="New Task"></Button>
      </View>
    </View>
    )
  }
}

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

Goskula Jayachandra · Accepted Answer · 2020-05-02 14:54:21Z

13

You are not declaring Stack in your program include this line in your program:

const Stack = createStackNavigator();

Add this line in your App function like this:

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

Hope this helps!

edited May 2, 2020 at 14:54

answered May 2, 2020 at 14:48

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Caleb C. Adainoo · Accepted Answer · 2021-05-02 00:21:48Z

0

Add this line to the top of your code

import { createStackNavigator } from "@react-navigation/stack";

answered May 2, 2021 at 0:21

Caleb C. Adainoo

1076 bronze badges

Comments

Jay · Accepted Answer · 2021-07-19 22:05:02Z

0

In case someone looking for without using class...

import * as React from 'react';
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;

Try on expo, click here

answered Jul 19, 2021 at 22:05

Jay

3482 silver badges11 bronze badges

Comments

Fristicool · Accepted Answer · 2022-07-07 16:35:51Z

0

write this instead if you are using react native:

import { createNativeStackNavigator } from '@react-navigation/native-stack';

&&

const Stack = createNativeStackNavigator();

answered Jul 7, 2022 at 16:35

Fristicool

1

Collectives™ on Stack Overflow

Error: Can't find variable Stack, React Navigation

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related