React navigation- import file navigate page

Question

This file import

class Footer extends Component {
  _notifications = () => {
    const { navigate } = this.props.navigation;
    navigate('Ntf', {});
  }

  render() {
    return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
  }
}

This file main ( React-Navigation - NavigationDrawerStructure ).

import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
    return (<View><Footer/></View>);
}

Click _notifications button after error : undefined is an object c.props.navigation.navigate Help me please

score 0 · Accepted Answer · answered Jan 24 '20 at 00:43

Only the components defined in routes has access to the navigation props not the child of those components!.

Solution:-

import file

class Footer extends Component {
  _notifications = () => {
     this.props.NavigateToNTF()
  }

  render() {
    return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
  }
}

main file:-

import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
    return (<View><Footer NavigateToNTF={()=> this.props.navigation.navigate('Ntf', {}) } /></View>);
}

Navigation props are not available in child component that's why you are getting undefined when you call navigation props but with this solution we are sending props from the parent file (main file) to the child (export file) so that way it will work!.

If it helps! make sure to motivate me you know what i mean!.

React navigation- import file navigate page

1 Answers1