Get current route and props

[shiftrtech]

Version

• react-native-router-flux v4.0.5
• react v16.5.0
• react-native v0.57.2

Help needed

Hi, i am facing an implementation issue, currently i have a chat screen on my app. I get notification events on my Routes component so i get the push notification event and i load the scene i want to (chat scene).

Now the problem is that they can be multiple chats (using the same scene with differents properties obviously), i want to reload the scene only if the push notification is about another chat (not the current chat) so i need to "get current route and his properties" when the event is triggered.

As a first step, i only check if current scene is "chat" (with ACTIONS.currentScene), but now i need to access the properties of current scene.

This is my app structure:

`

<-- This is my Router component

  </Provider>`

Any help will be appreciated

[Pauligrinder]

Here's how I handled a similar situation (I update the chat regardless, but I only want to show a notification if another chat or a different view is open):

import { Actions } from "react-native-router-flux";

this goes inside the notification handler. notif is the notification object that comes from FCM.

var chatView = null;
                    try {
                        chatView = Actions.refs.chatView.getWrappedInstance();
                    } catch (e) {
                        console.log("chatview not open");
                    }
                    if (
                        chatView != null
                                ? chatView.props.id !== notif.chat_id
                            : true
                    ) {
                        showNotification(notif); // this is a function that calls FCM.presentLocalNotification()
                    }

In your case you would invert it to chatView.props.id === notif.chat_id (or whatever your parameters are called). Now since you have a reference to chatView, you can call an update function where I'm calling showNotification(). Oh and by the way. For this to work, you must define { withRef: true } in the ChatView. Here's how my export looks:

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    null,
    { withRef: true }
)(ChatView);

[shiftrtech]

@Pauligrinder Thak you, i am trying what you said me (at the end i did upate the chat regardless too, but i have reac-redux v6, so, now withRef it doesnt works the same, i am try to get a good implementation example of forwardRef

The withRef option to connect has been replaced with forwardRef. If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

[Pauligrinder]

@Pauligrinder Thak you, i am trying what you said me (at the end i did upate the chat regardless too, but i have reac-redux v6, so, now withRef it doesnt works the same, i am try to get a good implementation example of forwardRef

The withRef option to connect has been replaced with forwardRef. If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

Yeah, I noticed this now too. I haven't updated myself so I can't try it, but I'd assume all you need to do is remove getWrappedInstance() from the call.

[Pauligrinder]

now withRef it doesnt works the same, i am try to get a good implementation example of forwardRef

Did you ever find find an example of forwardRef @shiftrtech ? I just updated and I'm kinda stuck on that now since withRef doesn't work anymore. forwardRef: true seems to be the correct way of doing it in connect, but how do I access the component later?

[ganoch]

Yeah, I noticed this now too. I haven't updated myself so I can't try it, but I'd assume all you need to do is remove getWrappedInstance() from the call.

There is no getWrappedInstance call on my working code prior redux v6

  static handleExit() {
     Actions.refs.screenHome.onExit();
  }

however, in navigation store following code fails

if (!isStatelessComponent(Component)) {

console.log reveals that Components with forwardRef: true are no longer functions but an object, with property WrappedComponent

I'm still looking into it.