Pass props through CreateAppContainer

Question

I'm trying to pass props through AppContainer. I was able to pass in through other components, but I can't figure out how to send props through createAppContainer

in App.js:

render() {
    return (
        this.state.isLoggedIn ? <DrawerNavigator /> : 
<SignedOutNavigator handler={this.saveUserSettings} />
    )
}

in SignedOutNavigator:

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";

const SignedOutNavigator = createStackNavigator({
    Login: {
        // screen: LoginScreen
        screen: props => <LoginScreen screenProps={value => {
            // I need to access props from here
            // like this.props.handler(value)
        }} />,
        navigationOptions: ({ navigation }) => ({
            header: null,
        }),
    }
});

export default createAppContainer(SignedOutNavigator);

score 10 · Answer 1 · answered Mar 05 '19 at 12:21

10

You have to scope the props under screenProps to be able to access it at the screen level.

// App.js
<AppNavigator
  screenProps={{
    handler: () => {},
    hello: "World"
  }}
/>

// Navigator.js
const StackNavigator = createStackNavigator({
  Login: {
    screen: ({ screenProps, navigation }) => {
      screenProps.handler();

      // ...
    },
  },
})

answered Mar 05 '19 at 12:21

Samuel Vaillant

3,667
1
14
21

I changed App.js as you said but it doesn't seem to work: this.state.isLoggedIn ? : { this.saveUserSettings(settings) } }} /> and console.log(this.screenProps) in Navigator returns undefined – irondsd Mar 05 '19 at 13:34
You don't have to use `this` to access the props at the screen level. The props are provided as argument to the `screen` function (which is a component). You can also directly provide the `LoginScreen` component to screen `screen: LoginScreen`. Then inside `LoginScreen` you have access to `this.props.screenProps`. – Samuel Vaillant Mar 05 '19 at 14:56
I have this structure: App.js > SignedOutNavigator > LoginScreen > LoginForm. So I was working backwards and I was able to get from Form to SignedOutNavigator. Where I have just console.log for now. But I don't understand how do I pass props from App.js to SignedOutNavigator, so then I will pass them further. SignedOutNavigator is my problem here. Even though I'm sending props from App.js, as you showed me, console.log(screenProps) (or this.screenProps or this.props as well) in SignedOutNavigator is undefined. – irondsd Mar 05 '19 at 16:09
Could you update your question with the changes you've made in the code based on my answer? It will help to understand where the issue come from. – Samuel Vaillant Mar 05 '19 at 16:18

score 2 · Accepted Answer · answered Mar 05 '19 at 16:22

Okay, I got this to work with help of Samuel Vaillant. I had to make couple of modifications.

My App.js:

render() {
        return (
            this.state.isLoggedIn ? <DrawerNavigator /> : <SignedOutNavigator
                screenProps={{
                    handler: (settings) => { this.saveUserSettings(settings) }
                }}
            />
        )
    }

My SignedOutNavigator:

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import LoginScreen from "../screens/LoginScreen";

const SignedOutNavigator = createStackNavigator({
    Login: {
        // screen: LoginScreen
        screen: screenProps => <LoginScreen screenProps={value => {
            screenProps.screenProps.handler(value)
        }} />,
        navigationOptions: ({ navigation }) => ({
            header: null,
        }),
    }
});

export default createAppContainer(SignedOutNavigator);

Pass props through CreateAppContainer

2 Answers2