Cannot read property ‘navigate of undefined

Question

1.19M viewsSeptember 16, 2022javascript react-native

2

Hakan September 12, 2022 0 Comments

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 from Page1 to Header, But I couldnt send from Header to Page1. and also how can go from header to page1 I mean how to open Page1 with clicked some button

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

export default class Header extends Component {

    constructor(props){
        super(props);
    }

    render() {
        console.warn(this.props.navigation);
    return (
        <View style= {styles.headerStyle}>
            <View style= {[styles.View2, {backgroundColor: 'rgba(116,185,255,0.3)'}]} >
                <Text style={[styles.childText, {color:'#74b9ff'}]} >{this.props.color1}</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(255,234,167,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ffeaa7'}]} >{this.props.color2}</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(204,255,204,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ccffcc'}]} >0</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(255,128,128,0.3)'}]}>
                <Text style={[styles.childText, {color:'#ff8080'}]} >0</Text>
            </View>
            <View style= {[styles.View2, {backgroundColor: 'rgba(207,207,176,0.3)'}]}>
                <Text style={[styles.childText, {color:'rgba(207,207,176,0.3)'}]} >0</Text>
            </View>
        </View>
    );
 };
}

here is my Page1 where I use Header Component.

import React, { Component } from 'react';
import { View, Text, FlatList, Image, ScrollView} from 'react-native';
import DOMParser from 'react-native-html-parser';
import axios from 'axios';
import Header from './Header';
import Bar from './Bar';
import Footer from './Footer';

const Blue = [];
const Yellow = [];

export default class Page1 extends Component {    

    state = {
         leader: []
    }

    componentWillMount() {
        fetch('url')
        .then(response => {
            if (response.ok) {
                return response;
            }else {
                let error = new Error('Error ');
                error.response = response;
                throw error;
            }
            },
            error => {
                let errmess = new Error(error.message);
                throw errmess;
            })
        .then(response => response.text())
        .then(leaders => {
            const str = leaders.substring(76);
            const str2 = str.substring(0, str.length - 9);
            const x = JSON.parse(str2);
            this.setState({ leader: x });

        })
        .catch(error => {
            this.setState({ errMessage: error.message });
        });
        }

        renderall() {           
            return this.state.leader.map(alb => 
              <View style={styles.container} key= {alb.Ref}> 
                <Text style={[styles.textStyle, {marginLeft:'5%'}]}> {alb.Tescil_No}  </Text>

                <Text style={[styles.textStyle, {marginLeft:'6%'}]}> {alb.GumrukAdi}  </Text>

                <Text style={[styles.textStyle, { marginLeft:'5%'}]}> {alb.ACIKLAMA}   </Text>                                                
              </View>
          )
        }

        count(){
            return this.state.leader.map(color => {
                if(color.Renk == 'MAVI'){
                    Blue.push("MAVI");
                }
                else if(color.Renk == 'SARI')
                {
                    Yellow.push("SARI")
                }
            })
        }

    render() {

       this.count();

        console.log(Blue.length);

        console.log(this.state.leader);

        return (

            <View style= {styles.firstView}> 
                 <View style={{flex: 1.5}}>
                     <Header color1 = {Blue.length}  color2 = {Yellow.length}/>
                 </View >
                     <View style={{flex: 0.5, backgroundColor:'#f2f2f2'}}>
                    <Bar />
                    </View>
                <View style={{flex: 9}}>
                    <ScrollView>
                {this.renderall()}
                </ScrollView>
                </View>
                <View style={styles.footerStyle}>
                  <Footer />
                  </View>  
            </View>
        );
}

2 Answers

score 0 · Answer 1 · 2022-09-13T12:39:46+00:00

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

score 1 · Answer 2 · 2022-09-13T01:36:59+00:00

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'
  }
});