Fuel-TS in React-Native

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.

Hey @singhparshant :wave:

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?

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:


Code snippet:

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

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

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

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.

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.

1 Like

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.

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.

Very interesting, thanks for investigating this for us :raised_hands:

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

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

1 Like