liveblocks client - fast reconnect with React Native

[vinodsantharam]

React Native developers are facing an issue with the liveblocks client. The window javascript object doesn't exist in the RN ecosystem. So when running the RN application there is an error in the client package:
TypeError: undefined is not a function (near '...window.addEventListener...')

The current workaround is:
window.addEventListener = () => {};

The goal of this event hook is to reconnect as soon as possible.

[vinodsantharam]

Fast reconnect

Currently @liveblocks/client is executed on browsers or in specific cases in a Node back-end server.
It's possible to lose the internet connection. That's why we implemented a polling system in the client to reestablish the connection with the Web Socket server. Thus, we try each 2, 3, 5 10 seconds. Furthermore Web browsers offer us an event when the internet connection is back.
So we attach a callback function to this event and when the callback is called we reconnect each room.

With React Native

Unfortunately, React Native doesn't offer an online event in its JavascriptCore code base. That's why we rely on 3rd party library such as react-native-community/netinfo.

That means that our client would rely on an external library, and which would the current client.ts code more complex. We also need to consider when the App is focused again (switching between apps).

require()

We try to enhance client.ts to support React Native. Our strategy was to detect if the code is executed in a React Native environment, and then dynamically import the library react-native-community/netinfo. If the developer hasn't the package installed, we throw an error message.
At that point we met an issue specific to React Native. The 'require' doesn't throw any errors (just log the error in the console) and our code crashed later.

Our thoughts

We were confident at the beginning of the React Native support. But when we faced the require() issue. We concluded that won't be easy to have a fast reconnect into the current client.ts.

We need to consider other scenarios with React Native too (e.g. App focused).

During our test the 3rd party library react-native-community/netinfo wasn't always reliable. Sometimes we got false positive with the status isInternetReachable.

The code is a bit more complicated. That's why we need to invest more time to solve this problem and even think if we need a dedicated client.ts for React Native.

[alidcast]

what's the status of the RN integration?

[nvie]

Hi @alidcast, thanks for reaching out and asking. Currently, we don't have any plans to support an official React Native integration, so we're not working on it. However, have you tried using our client package directly, following the instructions from our documentation? Curious to hear if that documentation fell short in any way for you. If so, please let us know, so we can provide better support for it. Thanks!