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

      })
    },
    })

@animaonline, can you provide a minimal git repo to reproduce the issue? — Tarun Lalwani, Mar 26 '18 at 07:46

score 1 · Answer 1 · answered Jul 23 '17 at 15:16

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);

answered Jul 23 '17 at 15:16

dotcomXY

1,586
1
15
18

@YaShChaudhary I think you might be running into one of the issues in here: https://github.com/react-community/react-navigation/issues/143, https://github.com/react-community/react-navigation/issues/80, checkout your router setup and see if those helps. – dotcomXY Jul 23 '17 at 15:33
tysm for pointing to this issue, yes its the same issue I am facing but none of the solutions worked for me :( – YaSh Chaudhary Jul 23 '17 at 15:57
@YaShChaudhary, in this case, you might want to change your question's description to let people have a better understanding on how you setup your router, and what each page looks like, then we can try to reproduce the structure locally and help you out. – dotcomXY Jul 23 '17 at 16:14
So you have tried this: `navigate("Msg",{}, { type: "Navigate", routeName: "Msg", params: { item, createdChannel } } )`, and it doesn't work? – dotcomXY Jul 23 '17 at 16:27
yes, I but with ChatStack `navigate("ChatStack', {}, { type: "Navigation/NAVIGATE", routeName: "Msg", params: {item, createdChannel} })` – YaSh Chaudhary Jul 23 '17 at 16:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149935/discussion-between-dotcomxy-and-yash-chaudhary). – dotcomXY Jul 23 '17 at 16:31

score 1 · Answer 2 · answered Mar 24 '18 at 16:06

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.

sending the navigation params as props to other component

2 Answers2