[Due for payment 2025-02-28] Implement the React-Native Pusher library for iOS and Android

[tgolen]

Problem

Pusher has been having problems reconnecting on Android devices (see this GH). This keeps people from using the app properly.

Solution

After speaking with Pusher support, they recommend using their React-Native Pusher library instead of Pusher-JS for the mobile clients. We will need to continue using Pusher-JS for web and desktop clients.

This will cause some changes to our pusher libraries like PusherConnectionManager.ts and pusher.ts and maybe even PusherUtils.ts in order to use a different lib for the mobile platforms.

Issue Owner

Current Issue Owner: @VickyStash

[VickyStash]

Hi, I'm Viktoryia from Callstack - expert contributor group - and I would like to work on this issue.

[VickyStash]

Updates:
I've compared the pusher-js and @pusher/pusher-websocket-react-native key differences and started the app update to use @pusher/pusher-websocket-react-native on mobile platforms.
There are a lot of syntax differences in pusher initialization and authorization.

The main difference that will result in significant code updates is the way we process events:

• In the pusher-js - we bind the event handler to the socket/channel - simple example. We even have function bindEventToChannel.

• In the @pusher/pusher-websocket-react-native we pass callbacks during pusher initialization or channel subscription:

  • onEvent <- most important one as all events received here
  • onConnectionStateChange, onError, onSubscriptionSucceeded, onSubscriptionError, etc

What I managed to do today:

• Updated pusher init function to follow @pusher/pusher-websocket-react-native syntaxis and made pusher authorization work.
• Updated pusher subscribe function.

The app can already initialize the pusher, subscribe to the private channel, and even receive events for it, but it can't process the events correctly because handlers need to be updated. That's what I'm going to work on next.
Besides that, I need to do a lot of code cleanup/polish and TS typing fixes.

[tgolen]

That sounds like great progress, thank you!

[VickyStash]

Updates:

• Today, I was focused on pusher events listening and processing. Finally, it seems to work as expected, at least with the message receiving scenario! I've prepared a raw Draft PR.
• My next steps:
  • Tests fixes
  • TS and lint fixes
  • Testing of all pusher-related functionality, @tgolen do you know, maybe we have a QA checklist for that? So I don't miss anything

[tgolen]

Testing of all pusher-related functionality, @tgolen do you know, maybe we have a QA checklist for that? So I don't miss anything

I don't think we have anything specific to pusher, no. Here are the main things that I would test out:

• With two separate clients signed into NewDot, chat with each other and verify each client is receiving the chats from the other person
• With the two accounts, submit some expenses and have the other account approve and pay them
• Make sure the "other user is typing..." feature works

I think that's generally it.

[VickyStash]

Updates:

• Resolved TS and lint fixes
• Working on jest tests fixes. Before,pusher-js-mock was used to mock the lib but it doesn't work as expected for @pusher/pusher-websocket-react-native. So I'm mocking @pusher/pusher-websocket-react-native to make it all work. Hopefully, I'll deal with it tomorrow.

[VickyStash]

Updates:

• Fixed jest tests!
• Updated Pusher folder to follow the rules of file organization for platform-specific implementations
• Minor code improvements/clean up
• Added Test steps to the Draft PR
• Started recording preparations.

We just need to finalize the recordings for all platforms. The PR will most likely be ready for the review tomorrow.

[VickyStash]

The PR has been opened for the review!

[tgolen]

Thanks @VickyStash! Once this is deployed to production, I'm gonna keep an eye on the logs to see if it improves the connection errors we were seeing. This will be reported in #52437

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.3-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Implement the React-Native Pusher library for iOS and Android #56610

If no regressions arise, payment will be issued on 2025-02-28. 🎊

For reference, here are some details about the assignees on this issue:

• @VickyStash does not require payment (Contractor)

[shubham1206agra]

@tgolen Please assign me here as reviewer

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.