Create a doc with extended information about HybridApp #56763
Conversation
|
|
||
| It means that HybridApp is a **regular native application**, which has an additional screen that runs React Native. | ||
| # How is HybridApp built? | ||
| If you have access to the `Mobile-Expensify` repository, you are eligible to build HybridApp. The main difference between NewDot and HybridApp is that the native code is located in a different place. The native code is located under `./Mobile-Expensify/Android` and `./Mobile-Expensify/iOS |
There was a problem hiding this comment.
Missing ` at the end of sentence
| # What is HybridApp? | ||
| Every React Native mobile application needs native codebase with an entry point, known as `ReactRootView`. Depending on the platform the implementation differs. Nevertheless as a rule of thumb we can say that React Native just needs a **native** screen where JavaScript runtime can manipulate components and views. |
There was a problem hiding this comment.
Great intro. A brief sentence explaining why we need HybridApp would be good for new contributors. Something like:
...HybridApp let us combine New Expensify and our classic app into a single mobile app for a seemless migration
| # How do the scripts work? | ||
| While working on the HybridApp we've prepared a set of scripts to make the work with HybridApp easier. In general, the scripts `npm install`, `npm run clean`, `npm run android`, and `npm run ios` work on the following condition: | ||
|
|
||
| **If you have cloned HybridApp to `Mobile-Expensify` submodule, change the default behaviour of the scripts to build HybridApp instead of NewDot.** |
There was a problem hiding this comment.
If you have cloned HybridApp to Mobile-Expensify submodule, the default behaviour of the scripts changes to build HybridApp instead of NewDot
| It means that whenever we create a React Native application from scratch we instantiate it on a (very basic, bare) native codebase. However, we can always use a different, already existing codebase to run React Native. This is how we've built HybridApp - we've created a new `ReactRootView`, and taken all JavaScript code to run it in so-called OldDot. | ||
|
|
||
| It means that HybridApp is a **regular native application**, which has an additional screen that runs React Native. | ||
| # How is HybridApp built? |
There was a problem hiding this comment.
If you have access to the
Mobile-Expensifyrepository, you are eligible to build HybridApp
If you have access to the closed-source Mobile-Expensify repository, you are eligible to build HybridApp <-- might help explain to contributors that they do not, and cannot have access.
| 2. apply patches from `./patches` | ||
| 3. cd to `Mobile-Expensify` | ||
| 4. install `node_modules` for OldDot | ||
| 5. apply patches from `./Mobile-Expensify/patches` -> for more info refer to [[#Patches]] |
There was a problem hiding this comment.
Patches link not working yet
|
|
||
| ## `npm run clean` | ||
| - **Without access to HybridApp**: | ||
| 1. clean all cache for NewDot by running `npx react-native clean-project-auto` |
There was a problem hiding this comment.
- clean all cache for NewDot
- clean all caches for NewDot
| - `./ios/Pods` | ||
| - `./ios/build` | ||
| - `./android/build` | ||
| - **With a cloned Mobile-Expensify submodule**: |
There was a problem hiding this comment.
Are these folders cleared? Lets say the user built NewDot prior to gaining access to HybridApp
./ios/Pods
./ios/build
./android/build
There was a problem hiding this comment.
but if it is irrelevant, then lets not include this
| # What is HybridApp? | ||
| Every React Native mobile application needs native codebase with an entry point, known as `ReactRootView`. Depending on the platform the implementation differs. Nevertheless as a rule of thumb we can say that React Native just needs a **native** screen where JavaScript runtime can manipulate components and views. | ||
|
|
||
| It means that whenever we create a React Native application from scratch we instantiate it on a (very basic, bare) native codebase. However, we can always use a different, already existing codebase to run React Native. This is how we've built HybridApp - we've created a new `ReactRootView`, and taken all JavaScript code to run it in so-called OldDot. |
There was a problem hiding this comment.
and taken all JavaScript code to run it in so-called OldDot.
and taken all JavaScript code to run it within the existing mobile application (OldDot).
There was a problem hiding this comment.
Lets just clarify this, as it is the first usage of 'OldDot'
|
|
||
| IMPORTANT: Please execute the following commands form the root of the project! | ||
| - `git submodule update --init` | ||
| - it initialises the submodule, and pulls the `Mobile-Expensify` code from the commit set in `Expesnify/App`. |
| - it initialises the submodule, and pulls the `Mobile-Expensify` code from the commit set in `Expesnify/App`. | ||
| - **IMPORTANT**: If you already have the `Mobile-Expensify` code, you don't need to run the command with `--init` flag. | ||
| - `git submodule update` | ||
| - it pulls the `Mobile-Expensify` code from the commit set in `Expesnify/App`. |
| 4. Check if you have a recent version of the `Mobile-Expensify` submodule | ||
| - if not, execute `git submodule update`, and rerun the build | ||
| 5. Clean the cache by executing `npm run clean` (with proper platform flags) | ||
| If the problem still exists, please share the error on the open source channel |
There was a problem hiding this comment.
If the problem still exists, please share the error in the #expensify-open-source channel.
| 4. Whenever you've updated `.env` files | ||
| This means that if you changed only React Native code, and didn't pull any changes, the rebuilt is probably not necessary. If something doesn't work, you can always restart the Metro bundler using the following command `npm run start --reset-cache` | ||
| ### Should I rebuild HybridApp after bumping a `node_modules` library? | ||
| The `package-lock.json` file contains information about exact versions of `node_modules` that will be installed on your machine. If you've bumped a dependency on your PR you can easily see if you would need to rebuild the app. In this case go to the `./node_modules/<PACKAGE_NAME>`, and see if there are any Objective-C, Swift, Java, Kotlin or C++ files. Usually they are located in `ios` or `android` folders. |
There was a problem hiding this comment.
If you've bumped a dependency on your PR you can easily see if you would need to rebuild the app. In this case go to the
./node_modules/<PACKAGE_NAME>, and see if there are any Objective-C, Swift, Java, Kotlin or C++ files.
If you've bumped a dependency on your PR you can easily check to see if you would need to rebuild the app by going to the ./node_modules/<PACKAGE_NAME>, and seeing if there are any Objective-C, Swift, Java, Kotlin or C++ files.
| ### Error: `undefined is not an object (evaluating 'Store.ReportHistory.bindCacheClearingEvents')` | ||
| This error indicates that YAPL JS (OldDot's JavaScript code) hasn't been built properly. In order to fix that, do the following: | ||
| 1. cd to `Mobile-Expensify` | ||
| 2. run `npm run grunt:build:shared` |
There was a problem hiding this comment.
This should be fixed, but lets keep it just in case it breaks again 🤷
| You can do a similar thing for NewDot if you know the path to the generated `.apk`. In this case you can reuse the `adb install` command providing a different path. | ||
|
|
||
| If you'd like to list all available `.apk`s to install them on your device you can run the following commands: | ||
| - **HybridApp**: `find Mobile-Expensify/Android/build/outputs -name "*.apk |
There was a problem hiding this comment.
Missing ` at end of sentence
cc: @Julesssss
Explanation of Change
Doc with extended information about HybridApp
Fixed Issues
$ N/A
PROPOSAL: N/A
Tests
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop