CODEWITHSUNDEEP
reactjsreact-nativereact-navigationexpo
AnchovyLegend
AnchovyLegend

Reputation: 12538

Navigate to a react-native screen undefined prop navigation

I am working on a react-native app and currently have two screens accessible using tabs on the bottom. I would like to navigate to a particular screen onPress and am trying to trigger the navigation from one screen to the next.

To do this, It looks like I need to pass in a prop to the screen and access it as follows:

const {navigate} = this.props.navigation;

And then do:

onPress={() => navigate('Result', {result: results[i]})}

Although, this generates an error saying that the navigation prop isn't defined. I am not clear on where this prop is suppose to come from / how to pass it in to the screen. Ideally, Id like every screen to have access to the navigation stack. I've been having a really tough time getting this to work and appreciate any advise on how to do this.

Relevant navigator code:

AppNavigator.js

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

    export default createSwitchNavigator({
      // You could add another route here for authentication.
      // Read more at https://reactnavigation.org/docs/en/auth-flow.html
      Main: MainTabNavigator,
    });

Upvotes: 0

Views: 1147

Answers (1)

Liren Yeo
Liren Yeo

Reputation: 3451

You can use withNavigation HOC to pass navigation prop into a component.

Example Code:

import React from 'react';
import { withNavigation } from 'react-navigation';

class YourComponent extends React.Component {
  render() {
    const {navigate} = this.props.navigation;
    return <Button onPress={() => navigate('Result', {result: results[i]})} />;
  }
}

export default withNavigation(YourComponent);

Source: https://reactnavigation.org/docs/en/with-navigation.html

Upvotes: 2

Related Questions