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:

<Header color1 = {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

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {

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

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

MainNavigation.js

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

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

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

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Header.js

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

export default class Header extends React.Component {

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

Screen1.js

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

export default class Screen1 extends React.Component {


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

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

Screen2.js

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

export default class Screen2 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>New screen</Text>
        <Button title={'Go back'} 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:

export default class Header extends Component {
    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