how to export stacknavigator with screenprops?

Question

I'm trying to export a stacknavigator such that child screens can have some screen properties. I tried something like this:

//Router.js
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import { AppRegistry } from 'react-native';
import Home from './Home';

let Router = 
{
  Home: {screen: Home, screenProps:"hello"},
}

const Navigator = StackNavigator(Router);
export default Navigator;

Then I have

//Home.js

import React, { Component } from 'react';

/* define navOptions */

export default class Home extends Component {
  static navigationOptions = navOptions;

  componentDidMount()
  {
    const db = new DB(this);
    db.open();
  };
    constructor(props)
    {
        super(props);
    }
render ()
{
console.log(this.props);
}
}

But this.props.screenProps is empty.

I then tried doing this

//Router.js
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import { AppRegistry } from 'react-native';
import Home from './Home';

let Router = 
{
  Home: {screen: Home, screenProps:"hello"},
}

const Navigator = StackNavigator(Router);
const nav = <Navigator screenProps="hello" />
export default nav;

But that caused this error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

So how do I pass custom screen properties over to my Home screen from the Router file?

morninlark · Answer 1 · 2018-04-18T07:23:22.020

The error says that screenProps expects an object, not a string. So screenProps should look like this

let Router = 
{
    Home: {screen: Home, screenProps: {name: "hello"}}
}

in case "name" is the Property you want to assign the "hello" to. This is at least how you would do it using the TabNavigator.

In the StackNavigator you don't pass screenProps, but according to How to Pass Parameters to screen in StackNavigator? this is how your Router should look like

let Router = 
{
    Home: {screen: Home, {name: "hello"}}
}

and you can access it on the other side with this.props.navigation.state.params.name

how to export stacknavigator with screenprops?

1 Answers1