Reference Error: Can't find variable: navigation in React Native

Question

This is the error I get when I click on the button "Details". I need to switch from one screen to another on button click.

The code snippet is as below:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
class HomeScreen extends React.Component {  
  render() {  
    return (  
        <View style={styles.container}>  
          <Text>Home Screen</Text>  
        </View>  
    );  
  }  
} 

class CartScreen extends React.Component {  
render() {  
    return (  
        <View style={styles.container}>    
            <Button mode="contained" onPress={() => navigation.navigate('Details')}>
            Details
            </Button>
        </View>  
    );  
}  
    function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      
    </View>
  );
}
}

Would be great if someone can sort this out! TIA.

Nooruddin Lakhani · Accepted Answer · 2020-12-04 12:34:52Z

1

You should change your class component into a functional component in order for consistency.

function HomeScreen({ navigation }) {
  return (
     <View style={styles.container}>    
            <Button mode="contained" onPress={() => navigation.navigate('Details')}>
            Details
            </Button>
        </View>  
  );
}

answered Dec 4, 2020 at 12:34

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Reference Error: Can't find variable: navigation in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related