[NoQA] [HybridApp] Add Mobile-Expensify submodule and build HybridApp on both platforms

[staszekscp]

cc: @AndrewGable @Julesssss

Explanation of Change

This PR adds Mobile-Expensify as git submodule to allow simpler setup of the HybridApp environment

The related OldDot PR: https://github.com/Expensify/Mobile-Expensify/pull/13282

Fixed Issues

$ https://github.com/Expensify/App/issues/49845 PROPOSAL: https://swmansion.slack.com/archives/C05LX9D6E07/p1731515589222279

Tests

Run the following scripts and see if they work correctly on NewDot (or if they work the same as before):

• [x] npm install
• [x] npm run clean
• [x] npm run android
• [x] npm run ios
• [x] npm run ipad
• [x] npm run ipad-sm
• [x] npm run pod-install

Offline tests

QA Steps

PR Author Checklist

• [x] I linked the correct issue in the ### Fixed Issues section above
• [x] I wrote clear testing steps that cover the changes made in this PR
  • [x] I added steps for local testing in the Tests section
  • [x] I added steps for the expected offline behavior in the Offline steps section
  • [x] I added steps for Staging and/or Production testing in the QA steps section
  • [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • [x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• [x] I included screenshots or videos for tests on all platforms
• [x] I ran the tests on all platforms & verified they passed on:
  • [x] Android: Native
  • [x] Android: mWeb Chrome
  • [x] iOS: Native
  • [x] iOS: mWeb Safari
  • [x] MacOS: Chrome / Safari
  • [x] MacOS: Desktop
• [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• [x] I followed proper code patterns (see Reviewing the code)
  • [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • [x] I verified that comments were added to code that is not self explanatory
  • [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • [x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • [x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • [x] I verified the JSDocs style guidelines (in STYLE.md) were followed
• [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• [x] I followed the guidelines as stated in the Review Guidelines
• [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• [x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• [x] I verified that if a function's arguments changed that all usages have also been updated correctly
• [x] If any new file was added I verified that:
  • [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• [x] If a new CSS style is added I verified that:
  • [x] A similar style doesn't already exist
  • [x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• [x] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • [x] I verified that all the inputs inside a form are aligned with each other.
  • [x] I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• [x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• [x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

N/A

Android: mWeb Chrome

N/A

iOS: Native

N/A

iOS: mWeb Safari

N/A

MacOS: Chrome / Safari

N/A

MacOS: Desktop

N/A

[melvin-bot[bot]]

@chiragsalian Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[staszekscp]

Converting to draft since we've encountered some minor issues with the HybridApp build! When they're resolved I'll reopen!

[AndrewGable]

Can we also make sure that we don't break the deploy with these changes?

[staszekscp]

@AndrewGable The changes from this PR shouldn't affect the deploy (since the NewDot build logic should not be changed). Temporarily we can point to another branch on Mobile-Expensify to allow people building the HybridApp from App, but the changes from this PR will affect the deploy, because I'm adjusting a bunch of build settings to make the app work.

Nevertheless, until the deploy scripts are adjusted we can stay in the "partial" setup, and if the tests go well we can merge the PR from OD

[staszekscp]

The PR is ready to be reviewed! 🚀

cc: @AndrewGable @Julesssss

[mountiny]

@Julesssss nice, love it, let's push this one forward this week. I will try to set up the app locally today using these instructions 🤞

[Julesssss]

Sharing my issues on a fresh install of the repo

1) App: If you haven't, please follow these setup instructions to setup the NewDot local environment:

• Cloned app
• gh pr checkout 52629
• Had to copy and paste .env file manually
  • For internal engineers, add a 'Internal engineers should do xyz'
• npm install issue on first run
  • npm cache clean --force (also switched off WARP)
  • npm install
• `npm run web failing
  • ErrorL PEM routines::no start line
  • I don't see any notes for internal engineers about this
  • Ran npm run setup-https

2) HybridApp Getting started with HybridApp

• git submodule update --init https is forbidden when cli prompts for user/pass
  • Eventally got around this with git submodule update --init --recursive
  • I might have fixed this by using a personal token as password
• npm run clean failed
  • Could not find method autolinkLibrariesFromCommandForPath() for arguments [../../] on extension 'reactSettings' of type com.facebook.react.ReactSettingsExtension.

3) Testing builds

• Web - Working ✅
• Android standalone - Error Failed to install the app on the device:

Error: Could not find the correct install APK file.
    at getInstallApkName (/Users/jules/Projects/Expensidev/testApp/App/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/tryInstallAppOnDevice.js:85:9)
    at tryInstallAppOnDevice (/Users/jules/Projects/Expensidev/testApp/App/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/tryInstallAppOnDevice.js:50:23)
    at installAndLaunchOnDevice (/Users/jules/Projects/Expensidev/testApp/App/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:237:38)
    at runOnSpecificDevice (/Users/jules/Projects/Expensidev/testApp/App/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:227:7)
    at buildAndRun (/Users/jules/Projects/Expensidev/testApp/App/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:168:14)

• Android Hybrid - Error Failed to install the app on the device:

FAILURE: Build failed with an exception.

* Where:
Settings file '/Users/jules/Projects/Expensidev/testApp/App/Mobile-Expensify/Android/settings.gradle' line: 6

* What went wrong:
A problem occurred evaluating settings 'Android'.
> Could not find method autolinkLibrariesFromCommandForPath() for arguments [../../] on extension 'reactSettings' of type com.facebook.react.ReactSettingsExtension.

[staszekscp]

Hey @Julesssss! Thanks for the feedback! I'd have some questions to make sure I understand everything well 😄

Had to copy and paste .env file manually

Do you mean by this the 5. step in Mobile-Expensify General Setup?

npm run clean failed

It seems like a patch hasn't been applied: have you executed npm install after the git submodule update?

npm run web failing

I think that in this PR, no web-related code was touched, so I think there might be a general problem 😄

npm install issue on first run

What was the issue? Do you have any error mesage that appeared on the way?

[Julesssss]

Hey, thanks. These were my general notes for improving the new repo setup process and I listed some issues/fixes so I can improve the documentation, but thanks for checking!

Do you mean by this the 5. step in Mobile-Expensify General Setup?

Ah lol, yes I do. Given that it's necessary for App though, I was expecting it to be listed in the App setup instructions too.

It seems like a patch hasn't been applied: have you executed npm install after the git submodule update?

Yeah, this disappeared after running npm i

I should have mentioned this, but the only issues I have now are the failing build steps for Android Hybrid and Android Standalone

---

Unrelated to this PR

I think that in this PR, no web-related code was touched

I fixed this with npm run setup-https

What was the issue? Do you have any error mesage that appeared on the way?

I fixed this with npm cache clean --force

[staszekscp]

Thanks for the response! I reproduced the Could not find the correct install APK file for the standalone app, so I'll be working on this!

As per the Could not find method autolinkLibrariesFromCommandForPath() for arguments [../../] on extension 'reactSettings' of type com.facebook.react.ReactSettingsExtension. error on Hybrid - I think reinstalling node_modules should help, since the missing method was added by me in a patch. I'll have a look at it again!

I also noticed that sometimes people have the problems with git submodule update --init command - recently I haven't seen them, so I thought that some repo settings were changed. Apparently it depends on local setup, but I think it happens only with the submodule - a regular git clone works just fine. Maybe I'll create a script that would clone the repo and place it into the submodule. Everything should work in the same way, but maybe we'll get rid of this problem

[mountiny]

I have tried testing this and got the iOS app to build, but I had issues connecting it to my local backend; specifically, only the newDot part was showing as offline. I might try to dig more tomorrow

[Julesssss]

Thanks for the response! I reproduced the Could not find the correct install APK file for the standalone app, so I'll be working on this!

Hey @staszekscp, were you able to resolve this issue?

[staszekscp]

@Julesssss Yep, it should work just fine now!

[staszekscp]

Hye @Julesssss 👋 Thanks for testing!

Actually the workflow for contributors without access to Mobile-Expensify shouldn't change at all - they'll still use npm run ios/android as before to build a standalone application. The *-standalone scripts are for conveniece of the "HybridApp engineers" in case they need to build NewDot, because for them the npm run ios/android scripts will build HybridApp instead.

As for instructions, am I missing anything?

• The behaviour will change, but the workflow shouldn't (both HybridApp and NewDot devs will use the same scrips, but they will build different apps, depending on the access to Mobile-Expensify)

<everyone should follow 'Getting started with HybridApp' steps>

• Yes, indeed - if someone with HybridApp access has already been working on NewDot, should only do git submodule update --init, and probably reinstall node_modules

<HybridApp now gets built from App, not Mobile-Expensify>

• Depends on the interpretation 😄 We will work from App only, but the native code that will be used to build HybridApp will be located in <PROJECT_ROOT>/Mobile-Expensify

[Julesssss]

The *-standalone scripts are for conveniece of the "HybridApp engineers" in case they need to build NewDot, because for them the npm run ios/android scripts will build HybridApp instead.

Ah I see, thanks. I see your comment here, but one thing I'm not getting is how this check is made for the repo. Is it checking for the submodule, or read/write access?

...because for them the npm run ios/android scripts will build HybridApp instead.

[staszekscp]

@Julesssss the check is pretty simple - it has basically 3 steps:

1. Enter the Mobile-Expensify directory
2. Check if package.json exists
3. Check if the name field's value is mobile-expensify

I didn't want to make it overly complicated, so I went for this simple and reliable check

[Julesssss]

I didn't want to make it overly complicated, so I went for this simple and reliable check

Thanks, that seems good to me.

[Julesssss]

@AndrewGable @mountiny any other thoughts here? I'd love to get this merged tomorrow so we have time to resolve any issues before the holidays.

[Julesssss]

ESLint errors come from untouched files. Ignoring.

[Julesssss]

Ignoring checklist, other checks are already failing.

[melvin-bot[bot]]

@Julesssss looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

[Julesssss]

@Julesssss looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

Explained above already.

[Julesssss]

Ah shit, these comments didn't show up, they were made same time as merge. But we can still review post-merge.

[OSBotify]

:hand: This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[melvin-bot[bot]]

npm has a package.json file and a package-lock.json file. It seems you updated one without the other, which is usually a sign of a mistake. If you are updating a package make sure that you update the version in package.json then run npm install

[github-actions[bot]]

🚀 Cherry-picked to staging by https://github.com/Julesssss in version: 9.0.74-3 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

[github-actions[bot]]

🚀 Deployed to production by https://github.com/luacmartins in version: 9.0.74-8 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅