How to pass props to 'screens'/components in react-navigation

Question

I'm fairly new to programming in general and even newer to JS and React(Native) but I have worked on this for an entire day now and I still haven't figured it out so I have resorted to Stack Overflow in hopes that someone can help me.

Basically what I want to accomplish is to set other Components as children of the App component because I want them to be able to access information that I will set in the state of App. However, at the same time, I am also using react-navigation to create bottom navigation bars and thus I have no idea on how I can pass props of App to these other Components such as the ExplorePage component which is representative of the other children components.

App

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

}

const MainScreenNavigator = createBottomTabNavigator(
  {
    Home: {screen: ExplorePage},
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default MainScreenNavigator;

ExplorePage, which is just like SearchPage and FavoritesPage

...imports

export default class ExplorePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }
  
  componentDidMount() {
    console.log(this.props.parentState ? this.props.parentState : "Parent state does not exist what do :(");
  }
  
  render(){
    return(
    <Text>Testing</Text>
    )
  }

And obviously every time the console prints that parentState does not exist. I thought that being in the same place would give the other components like ExplorePage props of App. Thanks for helping me!

Answer 1

for those who are looking for a React Navigation 5 solution, you can use initialParams like this:

<Stack.Navigator>
  <Stack.Screen
    name="screenName"
    component={screenComponent}
    initialParams={{key: value}}
  />
</Stack.Navigator>

Answer 2

You could pass a props using function. Try this

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

  render() {

     // old
     // const MainScreenNavigator = mainScreenNavigator(this.state.parentState);
     const MainScreenNavigator = mainScreenNavigator(this.state);

     return (
         <MainScreenNavigator />
     )


  }

}

const mainScreenNavigator = value => createBottomTabNavigator(
  {
    // Home: { screen : props => <ExplorePage {...props} parentState={value} /> },
    Home: { screen : props => <ExplorePage {...props} {...value} /> },
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default App;

Edit

First thing, I changed your MainScreenNavigator to be a function, as it is accepting state values dynamically.

Second thing, Instead of directly assigning { screen : Component }, I used function. This is the feature provided by reactnavigation. You can find about this in the documentation. ReactNavigation

If you want to pass multiple attributes then you can use es6 spread operator, as shown in the edit. {...value}, this will pass all the property of value to that component.