15

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!

3 Answers 3

23

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>
2
  • This also works in React Navigation 6. Oct 27, 2021 at 13:13
  • 1
    initialParams add navigation params (useRoute -> route.params), but not react component "props"
    – Aure77
    Apr 20, 2022 at 11:29
6

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.

3
  • Hello! Thank you so much it worked. Could you mind explaining a little bit about what you did and why it works? Btw I removed the {} curly brackets around Home to make it work otherwise it gives a syntax error
    – Harrison
    Jun 13, 2018 at 16:25
  • Also is there a way to assign ExplorePage every single variable from App's state or is the only way to individually assign?
    – Harrison
    Jun 13, 2018 at 16:32
  • Haha! I forgot about that {} curly brackets.. fixed in edit.. see in the edit about how I have passed the multiple params Jun 14, 2018 at 9:53
2

You should use Navigator Props "screenProps" as mentionned in API:

screenProps - Pass down extra options to child screens

On child screen, just take props via this.props.screenProps

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.