React Native Guide/Example

[D4nte]

This is a feature or change request

Problem

It is currently not possible to use js-waku in react-native. Probably because of the polyfills.
Should probably work now.

Definition of Done

Provide guide and example of using js-waku in React native. Update readme to clarify which implementations support react-native.

[therealjmj]

+1 this would be awesome

[dao]

also +1 - we would really like to be able to use js-waku in our mobile app and just realized there are incompatibilities with libp2p dependencies. @jrmeurer can help test any potential solutions.

[D4nte]

I believe that #337 needs to be done first, especially removal of polyfills. I want to check that next week.
What kind of incompatibilities are you encountering?

[therealjmj]

Unable to resolve module libp2p-gossipsub/src/heartbeat from /Users/.../node_modules/js-waku/build/main/lib/waku_relay/relay_heartbeat.js: libp2p-gossipsub/src/heartbeat could not be found within the project or in these directories:
  node_modules/js-waku/node_modules
  node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  25 | Object.defineProperty(exports, "__esModule", { value: true });
  26 | exports.RelayHeartbeat = void 0;
> 27 | const heartbeat_1 = require("libp2p-gossipsub/src/heartbeat");
     |                              ^
  28 | const utils_1 = require("libp2p-gossipsub/src/utils");
  29 | const constants = __importStar(require("./constants"));
  30 | const get_relay_peers_1 = require("./get_relay_peers");

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
...

[therealjmj]

React Native typically does not allow node modules. I'm not sure what would be needed to enable libp2p or other deps within React Native.

[D4nte]

Unable to resolve module libp2p-gossipsub/src/heartbeat from /Users/.../node_modules/js-waku/build/main/lib/waku_relay/relay_heartbeat.js: libp2p-gossipsub/src/heartbeat could not be found within the project or in these directories:

Yes, a dependency broke their API on patch version. Should be fixed with js-waku@0.20.0. Let me know if not.

[therealjmj]

Now:
ERROR Error: Requiring module "node_modules/js-waku/build/main/index.js", which threw an exception: TypeError: Conversion from 'BigInt' to 'number' is not allowed.

Same error we had with @noble/ed25519 library. We were not able to resolve this with either polyfills or babel configs.

[D4nte]

Now: ERROR Error: Requiring module "node_modules/js-waku/build/main/index.js", which threw an exception: TypeError: Conversion from 'BigInt' to 'number' is not allowed.

Same error we had with @noble/ed25519 library. We were not able to resolve this with either polyfills or babel configs.

Thanks @jrmeurer. I believe @jemboh has reached the same error.
He is off this week (back Thursday).

I wonder if adding a shim.js to js-waku could be a solution, as described here: facebook/react-native#28492 (comment)

It means changing js-waku of course. Is that something you already tried? FYI @jemboh, I think we should try this next, WDYT?

ps: Such a shim could also help with #358 without needing lib consumer to update their browserlist so it could be a 1 stone 2 birds outcome.

[therealjmj]

Shim in js-waku could be a good idea. I haven't tried this yet - we have a massive deadline in 1 month, so a bit distracted.
Would love to launch with js-waku, I imagine it will be a group effort 🙏

[jemboh]

@jrmeurer I've been working on this and have come across the same issue with the BigInt error. I've written a rough guide in the readme. https://github.com/status-im/rn-waku-relay-poc

I'm going to look in to a shim in js-waku itself as well.

Any extra things you might have seen along the way, please feel free to raise a PR or an issue in that repo so we can keep each other updated on our progress.

Thanks for all your help and work so far! 🤝

[D4nte]

It may make more sense to use a native module based on go-waku. See https://discord.com/channels/864066763682218004/865466694554484738/971941000333393960:

Publish a native module would mean:

1. Waku code would be run natively, so there is no messing around the JavaScript Core Engine and its limitations
2. Again, native so better performance
3. Should not make much difference for developers as a JS package would be published and can be imported in react-native.