Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example application for React Native #2570

Open
petertonysmith94 opened this issue Jun 20, 2024 · 11 comments
Open

Example application for React Native #2570

petertonysmith94 opened this issue Jun 20, 2024 · 11 comments
Labels
feat Issue is a feature good first issue Suitable for newcomers looking to contribute

Comments

@petertonysmith94
Copy link
Contributor

petertonysmith94 commented Jun 20, 2024

Summary

Currently, we have no example applications that use React Native. The documentation, suggests to use Expo so we should follow their advice:

  • Create a React Native application in our apps/* directory:

    npx create-expo-app@latest
  • Add some simple functionality for testing purposes:

    • Create provider
    • Generate wallet
    • Check balance
  • The following Signer logic has been reported to fail during build, it would be good to confirm it is confirmed:

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

Scope of work for React Native support

1. Platform-specific Entry Points

  • We’ll need React Native specific implementations alongside our current Node/browser paths
  • Particularly for crypto operations (we’re heavily using Node’s crypto and browser’s Web Crypto API)
  • Need to configure package.json with proper “react-native” entry points

2. Crypto Implementation

  • Add React Native specific crypto implementations
  • Will need to use RN-compatible alternatives like react-native-get-random-values
  • May need polyfills for Buffer and other Node.js built-ins
  • Test crypto operations thoroughly on mobile environment

3. Module Resolution

  • Need to handle subpath exports properly for Metro bundler
  • Currently seeing issues with imports like @fuel-ts/address/configs
  • May need to restructure how we export our submodules

4. Documentation & Testing

  • Add React Native setup instructions
  • Document required polyfills and Metro config
  • Set up CI with React Native test app
  • Add React Native specific examples

Questions to discuss:

  • Do we want to maintain three separate implementations (Node/Browser/RN)?
@petertonysmith94 petertonysmith94 added feat Issue is a feature p2 labels Jun 20, 2024
@petertonysmith94 petertonysmith94 added this to the 0.x post-launch milestone Jun 20, 2024
@danielbate
Copy link
Contributor

danielbate commented Jun 26, 2024

This could be a contender for good first issue? We've got some similar apps and its isolated from src, could be good for someone with native experience to pick up.

@petertonysmith94 petertonysmith94 added the good first issue Suitable for newcomers looking to contribute label Jun 26, 2024
@YaTut1901
Copy link
Contributor

hello, I can take this

@petertonysmith94
Copy link
Contributor Author

Go for it @YaTut1901 - as always, give me a shout if you need anything 😄

@YaTut1901
Copy link
Contributor

YaTut1901 commented Jul 3, 2024

@petertonysmith94 hello, regarding this task, I had several issues to build react-native with pnpm monorepo - unexpectedly that appeared to be not trivial. Now I can't resolve the problem that fuels package that is decalared with "workspace:*" can't be found when build with expo. Could you check if I miss something? The branch is here: https://github.com/YaTut1901/fuels-ts/tree/YaTut1901/feat/demo-react-native

@petertonysmith94
Copy link
Contributor Author

@YaTut1901 I'll try give this a look over for you today, but it might be early next week :)

@YaTut1901
Copy link
Contributor

@petertonysmith94 hello, have you managed to check it?

@petertonysmith94
Copy link
Contributor Author

Hey @YaTut1901 👋🏼

I had a quick look, have you looked over the follow resource about managing a monorepo with Expo?

@YaTut1901
Copy link
Contributor

YaTut1901 commented Jul 11, 2024

@petertonysmith94 yes, I've done it accordingly with that page, but it can't build project properly. So I've done it using workaround from this issue: expo/expo#28775
Seems like working well unless it can't resolve fuels package while building. Strange thing that it can resolve it while compiling and VS code show no warnings regards that

@petertonysmith94
Copy link
Contributor Author

@YaTut1901 I haven't had the time to properly look over your solution yet.

Potentially a better way forward, might be create a React Native app outside of our mono repo and getting that integrated with fuels successfully. That way, we can eliminate all the mono repo related issues (which I'm sure there are a few).

@YaTut1901
Copy link
Contributor

@petertonysmith94 how do you suggest to do it? A separate repo?

@petertonysmith94
Copy link
Contributor Author

@YaTut1901 Yeah a seperate repo would be ideal.

@arboleya arboleya removed this from the 0.x post-launch milestone Jul 19, 2024
@arboleya arboleya removed the p2 label Jul 20, 2024
@arboleya arboleya added the temp:notion label Sep 8, 2024 — with Linear
@arboleya arboleya added the temp-linear label Sep 8, 2024 — with Linear
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat Issue is a feature good first issue Suitable for newcomers looking to contribute
Projects
None yet
Development

No branches or pull requests

4 participants