sending the navigation params as props to other component

Question

I am using RN v0.46.4 , react-navigation and sendbird.

I am developing a chat application.

What I am trying to do is that navigating the user to Msg screen with two params item (contain user info) and createdChannel .

They are passed but only once i.e. each time I navigate to Msg screen for different users , I receive the same value on which I have presses first.

Chat Screen

_chat(item){

 // console.log(item);
 const { navigate } = this.props.navigation

  var userIds = [item.id,1];
  sb = new SendBird({appId: APP_ID});
  sb.connect(1, function(user, error) {
         //console.log(user);
      sb.GroupChannel.createChannelWithUserIds(userIds, true, item.firstname, function(createdChannel, error) {
    if (error) {
        console.error(error);
        return;
    }

   //console.log(createdChannel);
   navigate('Msg', { item, createdChannel })

});

Also, when I console createdChannel in _chat function , it gives the roght information as expected.

But when I console it in Msg screen , I receive only the first createdChannel created, already told above.

Msg Screen

 super(props);
  console.log(props.navigation.state.routes[1].params.createdChannel);

My router structure:

const CustomTabRouter = TabRouter(
  {

    Chat: {
      screen: ChatStack, 
      path: ""
    }
}

ChatStack

const ChatStack= StackNavigator({
      Chat:{screen: Chats,
      navigationOptions: {
       header: null,
     }},

      Msg: {
      screen: Msg,
      navigationOptions: ({ navigation}) => ({
       title: `${navigation.state.params.item.firstname} ${navigation.state.params.item.lastname}`,
        tabBarVisible: false

      })
    },
    }) 

Answer 1

In your Msg screen's constructor function, try accessing the item and createdChannel by calling props.navigation.state.params.createdChannel.

super(props);
console.log(props.navigation.state.params.createdChannel);
console.log(props.navigation.state.params.item);

Answer 2

I found myself in a similar situation. In my case the problem was because passing params to nested screen was intentionally removed from the lib (1.0.0-beta21 to 1.0.0-beta22).

Note: But as of now, react-navigation version is v1.5.2

https://github.com/react-navigation/react-navigation/issues/3252

Anyway, my quick and dirty solution is to use screenProps to inject props into screen.

const ChatStack= StackNavigator({
  Chat:{ screen: Chats, ... },
  Msg: { screen: Msg, ... },
});

// Instead of exporting ChatStack directly, create a wrapper and pass navigation.state.params to screenProps

export default (props) => {
  const params = props.navigation.state.params;
  // const params = _.get(props, 'navigation.state.params');
  return (
    <ChatStack screenProps={params} />
  );
};

Now all screens under ChatStack can access those props injected.