CODEWITHSUNDEEP
react-native
AlainIb
AlainIb

Reputation: 4728

react native this.props.navigation is undefined in main APP

I'm trying to use "this.props.navigation" in my main react native App but it is undefined. In my others components included with TabNavigator and ScreenNavigator it work.

My App.js 

const MyTabView = TabNavigator(
  {     
    Projects: { screen: Projects },     
    Explorer: { screen: Explorer },
    Profil: { screen: Profil }, ... 
  }        
);



const StackView = StackNavigator(
  {
    global: {
      screen: MyTabView,
      headerMode: "none",
      header: null,
      navigationOptions: {
        header: null
      }
    },

    TermsOfUse: { screen: TermsOfUse },
    LegalNotice: { screen: LegalNotice },
    Options: { screen: Options }, ...       
  } 
);

export default class App extends React.PureComponent {
  constructor (props) {
    super(props); 
    console.log(this.props.navigation); // <----------  UNDEFINED
  }


  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          persistor={persistor}>

          <View style={styles.fullScreen}>
            <StackView />

            <Tutorial navigation={this.props.navigation} />  // <----------  this.props.navigation  is  UNDEFINED
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

Upvotes: 0

Views: 2788

Answers (2)

Aseem Upadhyay
Aseem Upadhyay

Reputation: 4537

Your App class is not included in the Navigator stack, due to which, the navigator class cannot provide any navigation props to it, that is why you are getting an undefined error because the navigation object doesn't exist.

Also if you need to open <Tutorial/> as a first screen, include it as the first element in the StackNavigator. That ways, it'll be always called first.

PS: You can additionally provide navigation={this.props.navigation} element to different components, which does not have to be included in the navigator class. For example, you need to open a dropdown element, which provides a sign out option that navigates to a home screen. In this use case, it'll be better to provide the navigation props as you have provided it in the question. But care needs to be taken, that the class providing the prop should have the object present

EDIT

According to your requirement, you need to display a tutorial for each screen that you open. You can do it via two approaches.

  1. Your way - You can declare it in the stack navigator. But your <Tutorial/> component will contain multiple conditions to check for the route and display the appropriate data ( that's what I can think of right now ).
  2. You can declare a common component that only shows the message in a modal. You can then declare an optional prop for each component, and in each of your components, you can check if this optional prop exists, you can show your common display <Tutorial/> component.

This is what I can think of currently. Will update if I have more thoughts :)

Hope this answers.

Upvotes: 1

bennygenel
bennygenel

Reputation: 24660

navigation prop is only available on components that are in navigation stack or child components that are using withNavigation HOC.

Upvotes: 1

Related Questions