How do I pass data while routing about native-starter-kit

[kcfgl]

+1 on this.

I've been attempting to build some custom routes to be able to do something like:

if (action.type === PUSH_NEW_ROUTE_WITH_PROPS) {
       console.log('push new route with props');
        globalNav.navigator.push({id: action.route, passProps: {bookID: '12341'}});
        return {
            routes: [...state.routes, action.route]
        };
    }

Where ultimately I could pass in the bookID dynamically to the Action. And then on the new view access the prop with:
this.props.bookID

But when I log the prop in the console it returns undefined.

[Proxiweb]

It work for me like this :

• In the bindAction add passProps

function bindAction(dispatch) {
  return {
     closeDrawer: () => dispatch(closeDrawer()),
     replaceOrPushRoute:(route, passProps) => dispatch(replaceOrPushRoute(route, passProps))
  }
}

• In the container adapt the method

 navigateTo(route, passProps) {
      this.props.closeDrawer();
      this.props.replaceOrPushRoute(route, passProps);
 }

• In the scene rendered for this route you can access passProps

const routes = this.props.navigator.getCurrentRoutes();
console.log(routes[routes.length -1].passProps)

[johntom]

Hi,
I tried your example but have something wrong. Code below. I created a public gist to view all code https://gist.github.com/johntom/7c2ee9b6bb22abe2e14aee852c9469dd.
Thanks
John
login/index.js
replaceRoute(route, passProps) {

    console.log(' pssProps',passProps)
    passProps.userid ='11766' // this emulates fetch of user getting the userid and adding to passProps
    console.log('s ',passProps)
   // route = home
    this.props.replaceRoute(route, passProps)
}

function bindActions(dispatch) {
return {
closeDrawer: () => dispatch(closeDrawer()),
replaceRoute: (route, passProps) => dispatch(replaceRoute(route, passProps)),
pushNewRoute: (route) => dispatch(pushNewRoute(route))
}
}
home/index.js
constructor(props) {
super(props);
console.log('home props ',props)

    const routes = props.navigator.getCurrentRoutes();

    let pp = routes[routes.length -1].passProps;
    console.log('pp ',pp) // nothing here
}

[krishbhattacharyya]

I have not spent much time on this. But the solution is may be like this:

In the route.js reducer:
export type State = {
routes: Array,
props: ''
}

const initialState = {
routes: ['login'],
props: ''
};

And the return state is like this 👍
if (action.type === PUSH_NEW_ROUTE) {
globalNav.navigator.push({id: action.route, passProps: action.passProps});
return {
routes: [...state.routes, action.route],
props: action.passProps
};
}

if (action.type === REPLACE_ROUTE) {
globalNav.navigator.replaceWithAnimation({id: action.route, passProps: action.passProps});

    let routes = state.routes;
    routes.pop();

    return {
        routes: [...routes, action.route],
        props: action.passProps
    };
}

You should do this on another actions type also.

I got the result in asyncStorage:
{"routes":["home"],"props":"1234"}

you can pass the data like this : onPress={() => this.replaceRoute('home','1234') }

Or another process => :) hopefully it works... I have checked this.

[SupriyaKalghatgi]

@sudhansusingh22 @kcfgl @Proxiweb @johntom @krishbhattacharyya Check with the latest release of NSK