CODEWITHSUNDEEP
react-nativereact-navigation
vmarquet
vmarquet

Reputation: 2532

Passing props from a root component through a BottomTabNavigator

My app root component looks like this:

export default class App extends React.Component {
  render() {
    <RootTabs doThings={this.doThings} />
  }
}

The RootTabs component is created by createBottomTabNavigator from react-navigation:

const RootTabs = createBottomTabNavigator({
  Movies: {
    screen: Movies
  },
  Actors: ... // etc
})

My problem is, I would like to transmit data (as a prop if possible) from the root component (App) to the Movies component, but Movies do not receive the doThings prop.

How to transmit props through a BottomTabNavigator to children?

If that's not possible, what would be the most simple way for a children component to call a method on a root component, when they are separated by a BottomTabNavigator?

Upvotes: 2

Views: 2702

Answers (1)

Victor
Victor

Reputation: 4199

Try using screenProps

screenProps is documented on this page

Answered referred from here

Minimal Example would be 

import React, { Component } from 'react'
import { AppRegistry, Button, Text, View } from 'react-native'
import { StackNavigator } from 'react-navigation'

class HomeScreen extends Component {
  render() {
    const { navigation, screenProps } = this.props

    return (
      <View>
        <Text>Welcome, {screenProps.user.name}!</Text>
        <Button onPress={() => navigation.navigate('Profile')} title="Go to Profile" />
      </View>
    )
  }
}

class ProfileScreen extends Component {
  render() {
    const { navigation, screenProps } = this.props

    return (
      <View>
        <Text>My Profile</Text>
        <Text>Name: {screenProps.user.name}</Text>
        <Text>Username: {screenProps.user.username}</Text>
        <Text>Email: {screenProps.user.email}</Text>
        <Button onPress={() => navigation.goBack()} title="Back to Home" />
      </View>
    )
  }
}

const AppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
})

class MyApp extends Component {
  render() {
    const screenProps = {
      user: {
        name: 'John Doe',
        username: 'johndoe123',
        email: '[email protected]',
      },
    }

    return (
      <AppNavigator screenProps={screenProps} />
    )
  }
}

export default MyApp

AppRegistry.registerComponent('MyApp', () => MyApp);

HomeScreen and ProfileScreen are components defined as screens for AppNavigator. In the example above, I am passing the user data from the top-level, root component MyApp to both HomeScreen and ProfileScreen.

Since there is a AppNavigator between MyApp and the screen components, we will need to pass the user to screenProps prop of AppNavigator, so that the AppNavigator will pass it down to the screens. Any other prop except screenProps will not be passed down.

MyApp <-- user data here .

  • AppNavigator <-- the StackNavigator, the middle man. must use screenProps to pass user data down .
    • HomeScreen <-- will receive user data from this.props.screenProps.user instead of this.props.user .
    • ProfileScreen <-- same as HomeScreen

Upvotes: 3

Related Questions