You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Right now, setting up the environment for running the MetaMask Mobile app is a major pain and a point of huge friction for developers looking to build a feature on the app. It takes hours for the first setup because of the so many tools needed to be installed which are prone to errors and problems (many times difficult to understand and debug) which causes devs, especially devs with less experience on mobile, to give up on developing on the MM Mobile app. This problem is also taking time from the Mobile team that has to help devs to debug issues and setup the app. Furthermore, every time a developer wants to run the Mobile app (after first setup), they need to compile the native part of the app which takes several minutes and is also prone to many issues with incompatibilities with the system.
Solution implemented
The work on this PR will allow major improvements in contributor experience in the MetaMask Mobile app. By integrating expo development builds, there is no more need for compiling the native part of the app meaning, devs can just install an APK on their device or simulator and load the javascript bundle. This makes the first setup and consequently runs several times faster.
The experience will be much similar to how a webapp works, but in this case the browser will be the development build, bundling and loading the javascript files is exactly the same. This means that for web/extension devs, the process will be much more familiar, and not only that but much much faster to setup and easier to understand.
Improvements in time to setup/run
Time for first setup goes from 3-4 hours to 1-2 minutes
Time for running the app goes from 4-5 mins to 1 min (and 8s for subsequently runs)
Why so much faster?
Before, the setup included everything here: https://github.com/MetaMask/metamask-mobile/blob/main/docs/readme/environment.md. Included installing several tools and apps such as xcode and android studio. This was always followed by errors and problems caused by the tools or the computer environment that were hard to understand and debug.
Now, devs can just download and install an APK and run one command yarn expo:start and that is it.
First step is to install expo modules that allows expo compatible modules to be installed and used: npx install-expo-modules@latest
[TODO] This increases iOS min version to 13.0, we should check if we're ok with this change
npx expo run:ios doesn’t run out of the box, it has to be integrated with our build.sh in order to build or dependencies. This is because it tries to run pod install but we actually install pods with bundle execute pod install.
Had to install npx expo install expo-build-properties to include the maven repos to fix an Android error. The expo build properties will be useful to implement (CNG)[https://docs.expo.dev/workflow/continuous-native-generation/]
The magic really starts to happen once "expo-dev-client": "~2.4.13"is installed
Ran into a bunch of errors, one of which I had to update "react-native-reanimated": "~3.3.0"
iOS stopped working with no error info, took me almost a week to pinpoint the error as it could be anywhere. Had to create a new react native app, install expo and compare every single file. Finally narrowed down the problem to return [super application:application didFinishLaunchingWithOptions:launchOptions];
Fixing unit testing and E2E: Expo doesn't support detox out of the box as the initial screen will now be the Expo screen which is something detox is not expecting, so I had to implement a workaround by launching the app and skipping the Expo screen by calling a deeplink that makes the bundle start loading. Also included other minor fixes.
Commit 21 and on
Implementing deploying Dev Builds on our CI/CD
✅ Android working
✅ iOS working
TODOs
iOS min version got increased to 13.0, we should check if we're ok with this change
Tsconfig got updated automatically, we should check if we agree
Test QA builds
Figure out where to host the development builds
Update the repo README
Acceptance criteria
All app functionality works as before (signing in, transactions, browser, etc.)
Deeplinks work as before
Updating from a previous build works without lost data
All dev tools (e.g. Flipper) still work
Vault backup still works
Icons still work (expo introduced a compatibility layer around our icon library)
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
Pre-merge reviewer checklist
I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
andrepimenta
added
team-mobile-platform
Run Smoke E2E
gauthierpetetin
added
the
team-tiger
Description
Problem
Right now, setting up the environment for running the MetaMask Mobile app is a major pain and a point of huge friction for developers looking to build a feature on the app. It takes hours for the first setup because of the so many tools needed to be installed which are prone to errors and problems (many times difficult to understand and debug) which causes devs, especially devs with less experience on mobile, to give up on developing on the MM Mobile app. This problem is also taking time from the Mobile team that has to help devs to debug issues and setup the app. Furthermore, every time a developer wants to run the Mobile app (after first setup), they need to compile the native part of the app which takes several minutes and is also prone to many issues with incompatibilities with the system.
Solution implemented
The work on this PR will allow major improvements in contributor experience in the MetaMask Mobile app. By integrating expo development builds, there is no more need for compiling the native part of the app meaning, devs can just install an APK on their device or simulator and load the javascript bundle. This makes the first setup and consequently runs several times faster.
The experience will be much similar to how a webapp works, but in this case the browser will be the development build, bundling and loading the javascript files is exactly the same. This means that for web/extension devs, the process will be much more familiar, and not only that but much much faster to setup and easier to understand.
Improvements in time to setup/run
Time for first setup goes from 3-4 hours to 1-2 minutes
Time for running the app goes from 4-5 mins to 1 min (and 8s for subsequently runs)
Why so much faster?
Before, the setup included everything here: https://github.com/MetaMask/metamask-mobile/blob/main/docs/readme/environment.md. Included installing several tools and apps such as xcode and android studio. This was always followed by errors and problems caused by the tools or the computer environment that were hard to understand and debug.
Now, devs can just download and install an APK and run one command
yarn expo:startand that is it.Steps I took to integrate expo
Commit 1 c36edda
npx install-expo-modules@latestnpx expo run:iosdoesn’t run out of the box, it has to be integrated with our build.sh in order to build or dependencies. This is because it tries to run pod install but we actually install pods with bundle execute pod install.sourcecode.c.objcwithsourcecode.cpp.objcppas explained in Xcode build fails Property 'reactDelegate' not found on object of type 'AppDelegate *' expo/expo#20850 (comment) because of property 'reactDelegate' not found on object of type 'AppDelegate *' error.Commit 2 abcb412
#import <UIKit/UIKit.h>with#import <objc/runtime.h> in RCTMinimizer.mCommit 3 b181a1f
npx expo install expo-build-propertiesto include the maven repos to fix an Android error. The expo build properties will be useful to implement (CNG)[https://docs.expo.dev/workflow/continuous-native-generation/]Commit 4 f586844
"expo-dev-client": "~2.4.13"is installed"react-native-reanimated": "~3.3.0"return [super application:application didFinishLaunchingWithOptions:launchOptions];Commit 5 820321f
[EXDevLauncherController.sharedInstance onDeepLink:url options:options]Commit 6 d482e09
Commit 7 - 20
Commit 21 and on
✅ Android working
✅ iOS working
TODOs
Acceptance criteria
Related issues
Fixes: #11548
Manual testing steps
These are subject to change!
yarn watchand scan the QR codeOR
yarn setup:expoyarn start:androidoryarn start:iosScreenshots/Recordings
Before
Video so long I don't want to put it here 😂
After
expo.metamask.recording.mov
Pre-merge author checklist
Pre-merge reviewer checklist