React-native-onesignal: how to use oneSignal with hooks?

[samuk190]

How to access onReceived, onOpened methods if I use react hooks instead of classes?

also, I want to know how I can display notification if user received a message from someone, but don't display the message if he's talking with the user now. (same screen)

[MuriloCampos]

The only difference from the example on the docs is that you gotta use the useEffect hook instead of lifecycle methods. So you set the listeners on a useEffect (with nothing in the dependency array), and remove the listeners on the return of the hook.

[samuk190]

The only difference from the example on the docs is that you gotta use the useEffect hook instead of lifecycle methods. So you set the listeners on a useEffect (with nothing in the dependency array), and remove the listeners on the return of the hook.

Thanks Murilo, I tried that because I did with socket io sucessfully, but with oneSignal it didnt work because I dont know how to get onReceive, onOpened.. method with Hooks Can you please show me an example?

[MuriloCampos]

just declare the callbacks as functions inside the component.

`function onOpened(openResult: any) {
console.log('Message: ', openResult.notification.payload.body)
console.log('Data: ', openResult.notification.payload.additionalData)
console.log('isActive: ', openResult.notification.isAppInFocus)
console.log('openResult: ', openResult)
}

function onIds(device: any) {
console.log('Device info: ', device)
}`

[samuk190]

just declare the callbacks as functions inside the component.

`function onOpened(openResult: any) {
console.log('Message: ', openResult.notification.payload.body)
console.log('Data: ', openResult.notification.payload.additionalData)
console.log('isActive: ', openResult.notification.isAppInFocus)
console.log('openResult: ', openResult)
}

function onIds(device: any) {
console.log('Device info: ', device)
}`

cool so in theory I can use onOpened in any screen to do my logic.. hmm if I put my oneSignal where I get access to my navigation, I can navigate user based on userData, I'll def try!

[rgomezp]

@MuriloCampos ,
Thanks for the response.

@samuk190 ,
Please let us know if the suggestion worked for you.

We plan on improving our RN documentation regarding Hooks soon. Thank you for your patience.

[MuriloCampos]

@rgomezp NP I actually just ran into this problem a couple of weeks ago and solved it like this. @samuk190 I also forgot to add that you probably are gonna have to wrap those functions inside a useCallback hook so you can add them in the dependencies array of the useEffect.

[rubek-joshi]

I have done the following:

useEffect(() => {
    OneSignal.addEventListener('received', onReceived);
    OneSignal.addEventListener('opened', onOpened);

    return () => {
      console.log('Removing Event Listeners');
      OneSignal.removeEventListener('received', onReceived);
      OneSignal.removeEventListener('opened', onOpened);
    };
  }, []);

Is this correct? The console.log('Removing Event Listeners'); is never fired since I am using it in my main component so I am thinking that removing the event listener is actually unnecessary in my case. Or is it actually preventing a memory leak?

[hugoh59]

No improvement still?

[ankitgauravapporio]

hi @rgomezp can you please update the documentation , thanks

[rgomezp]

Howdy,
Apologies for the delay. We are in the process of releasing a major release across all of our SDKs. We will update this once the release has gone out. Thanks for everyone's patience.

[seftonmonk]

Howdy,
Apologies for the delay. We are in the process of releasing a major release across all of our SDKs. We will update this once the release has gone out. Thanks for everyone's patience.

Is there any documentation for Hooks setup, I cant seem to get event listeners to fire.

[SaraChicaD]

Anyone have any examples of working OneSignal useEffect hooks?

[SaraChicaD]

Actually _just_ got this working, thanks to the ex from @rubek-joshi here's how I get the onReceived and onOpened to fire using useEffect:

  useEffect(() => {
    OneSignal.addEventListener('received', onReceived);
    OneSignal.addEventListener('opened', onOpened);
  }, []);

  const onOpened = openResult => {
    if (openResult) {
      console.log('Message: ', openResult.notification.payload.body);
      console.log('Data: ', openResult.notification.payload.additionalData);      
    }
  };

  const onReceived = notification => {
    console.log("Notification received: ", notification);
  };

Anyone have any examples of working OneSignal useEffect hooks?

[devpato]

@rgomezp NP I actually just ran into this problem a couple of weeks ago and solved it like this. @samuk190 I also forgot to add that you probably are gonna have to wrap those functions inside a useCallback hook so you can add them in the dependencies array of the useEffect.

Thanks for sharing your thoughts and ideas @MuriloCampos .

If someone here thinks is necessary to use useCallback in their own app, please check this article before doing so https://kentcdodds.com/blog/usememo-and-usecallback, since every React app is different and using useCallback, may not be necessary.