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 [email protected]. 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.

[D4nte]

For now we are focusing effort on publishing a native module using go-waku.

We are still open to making js-waku work in react-native but not clear how this can be achieved:

https://discord.com/channels/864066763682218004/865466694554484738/977027312782573578

[D4nte]

Waku is now available for react-native platforms via a go-waku native module: https://discord.com/channels/864066763682218004/957040003593154571/981324886679113808

yarn add @waku/react-native

Join Discord and give us some feedback.

Here are my latest thoughts on js-waku in react native: https://discord.com/channels/864066763682218004/865466694554484738/977027312782573578

wonder if we could have a way to make @noble/secp256k1 and its react native for optional dependencies and simply switch the library used depending on availability.
js-waku is currently using webpack but I am open to change it.

I am currently changing to rollup that supports the browser field in package.json. Will need to look up if it also support the react-native field.

[therealjmj]

I am currently changing to rollup that supports the browser field in package.json. Will need to look up if it also support the react-native field.

Incredible work, friends. 💪
react-native field is supported in package.json.

[D4nte]

Incredible work, friends. muscle react-native field is supported in package.json.

Supported by whom? Webpack support does not seem to be out of the box.

[therealjmj]

Incredible work, friends. muscle react-native field is supported in package.json.

Supported by whom? Webpack support does not seem to be out of the box.

It wouldn't be Webpack... I'm not entirely sure.
The react-native field was present in a fresh app created with the react-native CLI, ex npx react-native init NewApp. Perhaps used by metro or babel?

[D4nte]

#802 should hopefully help with that.

[fryorcraken]

Let's park it as https://github.com/waku-org/waku-react-native is available.

Should now work as the issues are fixed:

• no more polyfills
• Latest React Native supports BigInt AFAIK
• nobles library have replaced BigInt's n and ** with BigInt and .pow

Can be reviewed if a platform wants to use the same SDK for Browser and React Native.

[weboko]

Bringing it back to discuss potential work on the topic as it is asked by people who want to use js-waku.

cc @waku-org/js-waku-developers @fryorcraken

If we don't plan to enable it and repo https://github.com/waku-org/waku-react-native is not working then we need to deprecate it and update README + docs to prevent people from spending time on unnecessary things

[maschad]

Not sure if this is the best place to comment but I am currently leading an effort to do this for js-libp2p which would be required at a minimum to utilize it in js-waku, I can't speak to what further lift would be required after that as I am not so familiar with js-waku's codebase.

[weboko]

Not sure if this is the best place to comment but I am currently leading an effort to do this for js-libp2p which would be required at a minimum to utilize it in js-waku, I can't speak to what further lift would be required after that as I am not so familiar with js-waku's codebase.

Cool! For now this particular issue is too unclear an may or may not be connected to your efforts.
@maschad, to alight further DM'ed you on Discord

[fryorcraken]

cc @b4s36t4

[weboko]

Bringing it back to discuss potential work on the topic as it is asked by people who want to use js-waku.

cc @waku-org/js-waku-developers @fryorcraken

If we don't plan to enable it and repo https://github.com/waku-org/waku-react-native is not working then we need to deprecate it and update README + docs to prevent people from spending time on unnecessary things

Decoupling important part of this task into #1743

The example part is probably better to shape into template and to do in scope of waku-org/examples.waku.org#271

[achingbrain]

Some progress on react-native compatibility for js-libp2p - libp2p/js-libp2p#2136 (comment)

[danisharora099]

Some progress on react-native compatibility for js-libp2p - libp2p/js-libp2p#2136 (comment)

super cool!

---

imo we should prioritize the react-native SDK effort with js-waku cc @waku-org/js-waku-developers @hackyguru @chair28980

[weboko]

Adding a reference to @maschad example https://github.com/ipfs-shipyard/js-libp2p-react-native

[weboko]

What is done - pollyfills are provided - #1915
Leftover at this stage is to provide an example waku-org/lab.waku.org#36

Moving to TODO for now.

[fryorcraken]

Work in this should be paused for now.

[weboko]

Work in this should be paused for now.

I moved it into TODO because of that. Do you think we move to Icebox?

[fryorcraken]

I'd say icebox as it's not in the roadmap :)