error using reactnavigation: undefined is not object (evaluating _this2.props.navigation.navigate)

Question

I got this error after tapping Categories Tab(Button): undefined is not object (evaluating _this2.props.navigation.navigate)

it seems that the navigation property is not defined in AppFooter

I use nativebase for themeing.

App.js

...    
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';


export default class Home extends Component {
    static navigationOptions = {
        header: null,
    }
    render() {
        return (
            <StyleProvider style={getTheme(platform)}>
                <Container>
                    <Header style={{justifyContent:'flex-end'}}>
                        . . .
                    </Header>
                    <Content>
                       . . .
                    </Content>
                    <AppFooter/>
                </Container>
            </StyleProvider>
        );
    }
}

const Pardisiha = StackNavigator({
  Home: { screen: Home },
  Category: { screen: Category },
});

AppRegistry.registerComponent('Pardisiha', () => Pardisiha);

AppFooter.js

import React, { Component } from 'react';
import { Footer, Button, FooterTab, Text, Icon } from 'native-base';

export default class Index extends Component { 
    render() {
       return (
            <Footer>
                <FooterTab>
                    <Button vertical style={{paddingLeft:0,paddingRight:0}}>
                        <Icon name="person" />
                        <Text>Profile</Text>
                    </Button>
                    <Button vertical style={{paddingLeft:0,paddingRight:0}}>
                        <Icon name="search" />
                        <Text>Search</Text>
                    </Button>
                    <Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
                        <Icon active name="list" />
                        <Text>Categories</Text>
                    </Button>
                    <Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} >
                        <Icon name="home" />
                        <Text>Home</Text>
                    </Button>
                </FooterTab>
            </Footer>
        );
    }
}

score 0 · Answer 1 · answered Jul 20 '17 at 12:39

i have a solution for you, i have tried your code, and work in me. you can add function to navigate your navigation and passing it into AppFooter Component, this is the function :

App.js

onNavigate = (Screen) =>{
      this.props.navigation.navigate(Screen)
}

and then passing into your AppFooter, modify your code to this one:

App.js

<AppFooter onNavigate={this.onNavigate} />

and then if you want to call this function, modify to this one too:

AppFooter.js

<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Category')} >
    <Icon active name="list" />
    <Text>Categories</Text>
</Button>
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Home')} >
    <Icon name="home" />
    <Text>Home</Text>
</Button>

Hope can solving your problem, please notice me if you have another error, thanks :)

error using reactnavigation: undefined is not object (evaluating _this2.props.navigation.navigate)

1 Answers1