Fuel-TS in React-Native

[singhparshant]

Does anyone have experience using Fuel-TS in React-Native ?
It works fine in the browser, but I have issues while trying to resolve packages in Mobile-signer. Is there any example project/implementation that I can look at in React-Native.
I am using 0.90.0 version of the sdk.

[p.s]

Hey @singhparshant

I am not aware of any example projects integrated with React Native currently.

Would it be possible to get a minimal reproduction repository for this issue you are facing?

[singhparshant]

The repo is private, so can’t share the repo, but here is the gist of the code I am trying. The problem is fuels repo is referencing @fuel-ts for the packages and react-native is not able to resolve it when i import it from fuels. So I had to add manual resolving in metro config. The build goes through fine, but crashes during runtime because the instances are not initilized. eg - Provider is undefined and hence it doesn’t create the provider instance.
Here are the metro.config.ts and snippet of the code which works fine in browser, but not in react-native:

Metro.config.js:

https://gist.github.com/singhparshant/5214da0b25b77e67406051da379cae70

Code snippet:

https://gist.github.com/singhparshant/c3cff74ca6eec9fd286547266e548108

[p.s]

@singhparshant

The repo is private, so can’t share the repo, but here is the gist of the code I am trying. The problem is fuels repo is referencing @fuel-ts for the packages and react-native is not able to resolve it when i import it from fuels. So I had to add manual resolving in metro config.

You could try installing the @fuel-ts/account package and using that directly:

import { Provider } from "@fuel-ts/account";

[p.s]

If you choose to go down the manual resolution route, then I can see a couple problems with the gist you’ve sent over:

---

Config pointing at wrong entrypoint:

@fuel-ts/account/configs → node_modules/@fuel-ts/account/dist/config.js,

---

Missing imports for main entrypoints:

@fuel-ts/account → node_modules/@fuel-ts/account/dist/index.js

[singhparshant]

I tried the first approach which didn’t work , so added manual resolution on top after fixing the paths. Still doesn’t resolve the packages for some reason.

https://gist.github.com/singhparshant/830711d0a043a9b70f8d9eee269f9784

https://gist.github.com/singhparshant/1f262f9bc001c86552accd1fc64ab0b3

[p.s]

@singhparshant

I tried the first approach which didn’t work , so added manual resolution on top after fixing the paths. Still doesn’t resolve the packages for some reason.

metro.config.js · GitHub

Without a repository to take a look at, it’s going to be difficult to debug.

I would suggest using a minimal setup to start with, and a single sub package (e.g. @fuel-ts/math). Then trying to getting the app working with something simple like the toBytes function.

I’ve created the following issue to add React Native to our example apps.

[eesheng]

Why not setup in NextJS with app router and install the Fuel SDK, pull the files from the sample dApp provided in typescript SDK to your app.

[singhparshant]

The problem is with the Signer class the way it is being exported. For example, Address class works fine. But when i use Signer class :

import { Signer } from "@fuel-ts/account";
const extendedPublicKey = Signer.extendPublicKey(new Uint8Array(publicKey));

React-Native doens’t recognise this and crashes. Works fine on browser. I copied the Signer library locally, but not sure how will i do this for Provider library, basically classes in account module.

[p.s]

@singhparshant

React-Native doens’t recognise this and crashes. Works fine on browser. I copied the Signer library locally, but not sure how will i do this for Provider library, basically classes in account module.

Very interesting, thanks for investigating this for us

That does look like an issue, if you could raise an issue for this, that would be wonderful.

[maschad]

We’ve opened up an issue to add support for React Native so we can explore further once that’s resolved.