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

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

Answer 1

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 :)