# Fuel-TS in React-Native **URL:** \ **Category:** TypeScript SDK\ **Created:** [June 20, 2024, 11:05am UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954 "2024-06-20T11:05:51Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![singhparshant](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/singhparshant/32/2928_2.png) [@singhparshant](https://forum.fuel.network/u/singhparshant)\ **Post date:** [June 20, 2024, 11:05am UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/1 "2024-06-20T11:05:51Z")
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. ---
**Author:** ![p.s](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/p.s/32/2491_2.png) [@p.s](https://forum.fuel.network/u/p.s)\ **Post date:** [June 20, 2024, 12:03pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/2 "2024-06-20T12:03:36Z")
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? ---
**Author:** ![singhparshant](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/singhparshant/32/2928_2.png) [@singhparshant](https://forum.fuel.network/u/singhparshant)\ **Post date:** [June 20, 2024, 12:11pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/3 "2024-06-20T12:11:34Z")
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`: > Code snippet: > ---
**Author:** ![p.s](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/p.s/32/2491_2.png) [@p.s](https://forum.fuel.network/u/p.s)\ **Post date:** [June 20, 2024, 2:25pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/4 "2024-06-20T14:25:56Z")
> [@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: ```ts import { Provider } from "@fuel-ts/account"; ``` ---
**Author:** ![p.s](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/p.s/32/2491_2.png) [@p.s](https://forum.fuel.network/u/p.s)\ **Post date:** [June 20, 2024, 2:31pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/5 "2024-06-20T14:31:07Z")
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` ---
**Author:** ![singhparshant](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/singhparshant/32/2928_2.png) [@singhparshant](https://forum.fuel.network/u/singhparshant)\ **Post date:** [June 20, 2024, 3:25pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/6 "2024-06-20T15:25:01Z")
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. > > ---
**Author:** ![p.s](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/p.s/32/2491_2.png) [@p.s](https://forum.fuel.network/u/p.s)\ **Post date:** [June 20, 2024, 5:59pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/7 "2024-06-20T17:59:46Z")
> [@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](https://gist.github.com/singhparshant/830711d0a043a9b70f8d9eee269f9784) 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](https://github.com/FuelLabs/fuels-ts/issues/2570) to add React Native to our example apps. ---
**Author:** ![eesheng](https://avatars.discourse-cdn.com/v4/letter/e/2bfe46/32.png) [@eesheng](https://forum.fuel.network/u/eesheng)\ **Post date:** [June 21, 2024, 12:32pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/8 "2024-06-21T12:32:12Z")
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. ---
**Author:** ![singhparshant](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/singhparshant/32/2928_2.png) [@singhparshant](https://forum.fuel.network/u/singhparshant)\ **Post date:** [June 21, 2024, 1:16pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/9 "2024-06-21T13:16:16Z")
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 : ```auto 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. ---
**Author:** ![p.s](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/p.s/32/2491_2.png) [@p.s](https://forum.fuel.network/u/p.s)\ **Post date:** [June 24, 2024, 10:25am UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/10 "2024-06-24T10:25:00Z")
> [@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](https://github.com/FuelLabs/fuels-ts/issues/new/choose) for this, that would be wonderful. ---
**Author:** ![maschad](https://sea2.discourse-cdn.com/flex022/user_avatar/forum.fuel.network/maschad/32/2710_2.png) [@maschad](https://forum.fuel.network/u/maschad)\ **Post date:** [July 1, 2024, 4:53pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/11 "2024-07-01T16:53:42Z")
We’ve opened up an [issue](https://github.com/FuelLabs/fuels-ts/issues/2615) to add support for React Native so we can explore further once that’s resolved. ---
**Author:** ![system](https://us1.discourse-cdn.com/flex022/uploads/fuel/original/2X/5/57d5a345cc15a64b636e0d56e042857f8a0e80b1.png) [@system](https://forum.fuel.network/u/system)\ **Post date:** [July 22, 2024, 12:53pm UTC](https://forum.fuel.network/t/fuel-ts-in-react-native/5954/12 "2024-07-22T12:53:47Z")
This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.