Cannot Read Property 'navigate Of Undefined

I tried everything which I saw on the web but none of them solved my problem. it always gives me 'Cannot read property 'navigate' of undefined. How could I solve this? I send info

Solution 1:

The issue is that you are not passing your navigation props to your Header component. If you pass them like this:

<Headercolor1 = {Blue.length}color2 = {Yellow.length}navigation={this.props.navigation}/>

Then in your Header component you should be able to access the it via this.props.navigation.navigate

This is of course that your Page1 is contained in a navigator and has access to the navigation props, otherwise you will have to pass them to that.

Here is a snack that shows how to construct basic navigation with a header component on the page

https://snack.expo.io/@andypandy/navigation-with-custom-header

Here is the code:

Notice that both Screen1.js and Screen2.js are contained within a navigator, created in the MainNavigation.js. This allows them to have access to the navigation props. These props can then be passed to child components within Screen1 and Screen2

App.js

importReact, {Component} from'react';
importAppContainerfrom'./MainNavigation';
exportdefaultclassAppextendsReact.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

importScreen1from'./Screen1';
importScreen2from'./Screen2';
import { createStackNavigator, createAppContainer } from'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

constMainNavigator = createStackNavigator(screens,config);
exportdefaultcreateAppContainer(MainNavigator);

Header.js

importReact, {Component} from'react';
import { View, StyleSheet, Text, Button } from'react-native';

exportdefaultclassHeaderextendsReact.Component {

  render() {
    console.log('props', this.props)
    return (
      <Viewstyle={styles.container}><Buttontitle={'Gotonextscreen'} onPress={() => this.props.navigation.navigate('Screen2',  {})} />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    height: 80,
    width: '100%',
    backgroundColor: '#006600',
    justifyContent: 'flex-end'
  }
});

Screen1.js

importReact, {Component} from'react';
import { View, StyleSheet, Text } from'react-native';
importHeaderfrom'./Header'exportdefaultclassScreen1extendsReact.Component {


  render() {
    return (
      <Viewstyle={styles.container}><Headernavigation={this.props.navigation}/><Viewstyle={{flex:1}} /></View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Screen2.js

importReact, {Component} from'react';
import { View, StyleSheet, Text, Button } from'react-native';

exportdefaultclassScreen2extendsReact.Component {

  render() {
    return (
      <Viewstyle={styles.container}><Text>New screen</Text><Buttontitle={'Goback'} onPress={() => this.props.navigation.goBack()}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Solution 2:

You are missing the constructor. You need the constructor to use then this.props. Add this:

exportdefaultclassHeaderextendsComponent {
    constructor() {
        super(props)
    }
    render() { 
 //rest of your code

You destructure {navigate} from this.props.navigation. Your error is because this.props.navigation doesn't have a navigate property. Try to console.log(this.props.navigation) and check if there is a navigate property