fabioh8010 commented 1 year ago

Details

This PR aims to update Expensify's App to use our RN 0.72 fork. Some changes were made in order to follow upgrading from previous RN version to current one, following this steps.

SLACK DISCUSSION THREAD: https://expensify.slack.com/archives/C01GTK53T8Q/p1683321604215369

Patches created and corresponding upstream PRs

@onfido/react-native-sdk -> https://github.com/onfido/react-native-sdk/pull/130
lottie-react-native -> https://github.com/lottie-react-native/lottie-react-native/issues/1022
@oguzhnatly/react-native-image-manipulator -> We are going to replace with Expo Image Manipulator in the future

Fixed Issues

$ https://github.com/Expensify/App/issues/18444 $ https://github.com/Expensify/App/issues/21308 PROPOSAL: -

Tests

Full regression test

[x] Verify that no errors appear in the JS console

Offline tests

Same as above.

QA Steps

Same as above.

[x] Verify that no errors appear in the JS console

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 / Chrome
- [x] iOS / native
- [x] iOS / 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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- [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 approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- [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 a new component is created I verified that:
- [x] A similar component doesn't exist in the codebase
- [x] All props are defined accurately and each prop has a /** comment above it */
- [x] The file is named correctly
- [x] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- [x] The only data being stored in the state is data necessary for rendering and nothing else
- [x] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- [x] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- [x] All JSX used for rendering exists in the render method
- [x] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
[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(themeColors.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 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.
[x] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

melvin-bot[bot] commented 1 year ago

@aimane-chnaif @mariahcd One of you needs to 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]

fabioh8010 commented 1 year ago

Update

✅ Web and Desktop builds are working at a first glance.

❌ Android and iOS builds are totally broken.

Trying to run npm run android or npm run ios will lead to error: unknown command 'run-android' and error: unknown command 'run-ios' errors respectively. Trying to run pod install will lead to errors too, complaining about missing files (Error: Cannot find module 'react-native/scripts/react_native_pods.rb').

After some investigation, it seems that v0.72.0-rc.1-alpha.0 release is broken. First evidence is that it is incredibly small (only 27 MBs) compared to previous one. Second evidence is that its source files are wrong, missing files and scripts necessary to build the project (hence the errors above).

It looks like the sources must be built from packages/react-native/ files, according to publish-npm.js file. It was a change introduced in this commit, so it's something new.

We have our own publish-npm-expensify.js file to build the sources for our fork, but this change isn't there and is likely the reason for the broken release.

So, I changed every path in the file to point to packages/react-native/, built a local release, used it on the project and the errors above stopped (other errors appeared but are build errors and needs further investigations). The release also had a more realistic size, 350 MBs.

@roryabraham I will raise a PR to Expensify's RN fork with these changes for you to review it, which branch do I have to target?

We are probably going to need another release to continue with the RN update.

mountiny commented 1 year ago

Normally I would say you should target the latest release v0.71.2-rc.1-alpha.0 but if its borked, maybe we should wait for a new one. cc @roryabraham

fabioh8010 commented 1 year ago

@roryabraham I created a branch from the latest tag, here is the changes.

Which branch should I target for the PR?

fabioh8010 commented 1 year ago

Update

Created a branch from Expensify RN fork latest tag with the necessary changes in our custom publish script here. Waiting for instructions in order to create a PR.
Meanwhile, I published my own release from my fork (based on Expensify) in order to proceed faster with Android & iOS builds. We must change package.json to use the correct release when it's available.
Got several build errors in Android because we are now using Gradle 8.x. I was able to solve two of them and created temporary patches, but the last one is still standing.
Got one build error in iOS, but didn't investigate yet.

Android build errors

lottie-react-native

Caused by this breaking change in Gradle 8.x.
Created a temporary patch with the correction and will raise a PR in their GH tomorrow.

@onfido/react-native-sdk

Caused by this breaking change in Gradle 8.x.
We are using 7.4.0 version and the latest one is 8.3.0, but updating won't solve the problem.
Created a temporary patch with the correction and will raise a PR in their GH tomorrow.

react-native-reanimated

FAILURE: Build failed with an exception.

* What went wrong:
A problem was found with the configuration of task ':react-native-reanimated:mergeDebugJniLibFolders' (type 'MergeSourceSetFolders').
  - Gradle detected a problem with the following location: '/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native-reanimated/android/src/main/jniLibs'.

    Reason: Task ':react-native-reanimated:mergeDebugJniLibFolders' uses this output of task ':react-native-reanimated:packageNdkLibs' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed.

    Possible solutions:
      1. Declare task ':react-native-reanimated:packageNdkLibs' as an input of ':react-native-reanimated:mergeDebugJniLibFolders'.
      2. Declare an explicit dependency on ':react-native-reanimated:packageNdkLibs' from ':react-native-reanimated:mergeDebugJniLibFolders' using Task#dependsOn.
      3. Declare an explicit dependency on ':react-native-reanimated:packageNdkLibs' from ':react-native-reanimated:mergeDebugJniLibFolders' using Task#mustRunAfter.

    Please refer to https://docs.gradle.org/8.0.1/userguide/validation_problems.html#implicit_dependency for more details about this problem.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 8m 28s

Caused by this breaking change in Gradle 8.x.
Didn't find a solution yet, but from what I've seen updating to 3.1.0 will likely solve the problem, will test tomorrow.

iOS build errors

CompileC /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTBaseTextInputView.o /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'React-RCTText' from project 'Pods')
    cd /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -x objective-c -target x86_64-apple-ios12.4-simulator -fmessage-length\=0 -fdiagnostics-show-note-include-stack -fmacro-backtrace-limit\=0 -std\=gnu11 -fobjc-arc -fmodules -fmodules-cache-path\=/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/ModuleCache.noindex -fmodules-prune-interval\=86400 -fmodules-prune-after\=345600 -fbuild-session-file\=/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/ModuleCache.noindex/Session.modulevalidation -fmodules-validate-once-per-build-session -Wnon-modular-include-in-framework-module -Werror\=non-modular-include-in-framework-module -Wno-trigraphs -fpascal-strings -O0 -fno-common -Wno-missing-field-initializers -Wno-missing-prototypes -Werror\=return-type -Wdocumentation -Wunreachable-code -Wno-implicit-atomic-properties -Werror\=deprecated-objc-isa-usage -Wno-objc-interface-ivars -Werror\=objc-root-class -Wno-arc-repeated-use-of-weak -Wimplicit-retain-self -Wduplicate-method-match -Wno-missing-braces -Wparentheses -Wswitch -Wunused-function -Wno-unused-label -Wno-unused-parameter -Wunused-variable -Wunused-value -Wempty-body -Wuninitialized -Wconditional-uninitialized -Wno-unknown-pragmas -Wno-shadow -Wno-four-char-constants -Wno-conversion -Wconstant-conversion -Wint-conversion -Wbool-conversion -Wenum-conversion -Wno-float-conversion -Wnon-literal-null-conversion -Wobjc-literal-conversion -Wshorten-64-to-32 -Wpointer-sign -Wno-newline-eof -Wno-selector -Wno-strict-selector-match -Wundeclared-selector -Wdeprecated-implementations -Wno-implicit-fallthrough -DPOD_CONFIGURATION_DEBUG\=1 -DDEBUG\=1 -DCOCOAPODS\=1 -DOBJC_OLD_DISPATCH_PROTOTYPES\=0 -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator16.2.sdk -fasm-blocks -fstrict-aliasing -Wprotocol -Wdeprecated-declarations -g -Wno-sign-conversion -Winfinite-recursion -Wcomma -Wblock-capture-autoreleasing -Wstrict-prototypes -Wno-semicolon-before-method-body -Wunguarded-availability -fobjc-abi-version\=2 -fobjc-legacy-dispatch -index-store-path /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Index.noindex/DataStore -iquote /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/React-RCTText-generated-files.hmap -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/React-RCTText-own-target-headers.hmap -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/React-RCTText-all-non-framework-target-headers.hmap -ivfsoverlay /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/all-product-headers.yaml -iquote /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/React-RCTText-project-headers.hmap -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Products/Debug-iphonesimulator/React-RCTText/include -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Private -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Private/React-RCTText -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/DoubleConversion -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/RCT-Folly -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-Core -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-RCTText -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-callinvoker -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-cxxreact -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-hermes -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-jsi -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-jsiexecutor -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-jsinspector -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-logger -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-perflogger -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React-runtimeexecutor -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/SocketRocket -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/Yoga -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/fmt -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/glog -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/hermes-engine -I/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/libevent -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/DerivedSources-normal/x86_64 -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/DerivedSources/x86_64 -I/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/DerivedSources -F/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Products/Debug-iphonesimulator/React-RCTText -F/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/hermes-engine/destroot/Library/Frameworks/universal -F/Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Products/Debug-iphonesimulator/XCFrameworkIntermediates/hermes-engine/Pre-built -fmodule-map-file\=/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/React/React-Core.modulemap -fmodule-map-file\=/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/folly/RCT-Folly.modulemap -fmodule-map-file\=/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Headers/Public/yoga/Yoga.modulemap -include /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/ios/Pods/Target\ Support\ Files/React-RCTText/React-RCTText-prefix.pch -MMD -MT dependencies -MF /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTBaseTextInputView.d --serialize-diagnostics /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTBaseTextInputView.dia -c /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m -o /Users/fabiohenriques/Library/Developer/Xcode/DerivedData/NewExpensify-ghqcewtwqrncwpadxywxtcecpjza/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTBaseTextInputView.o -index-unit-output-path /Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTBaseTextInputView.o
/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m:523:23: error: use of undeclared identifier 'selectionOrigin'
      @"positionY": @(selectionOrigin.y),
                      ^
/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m:524:23: error: use of undeclared identifier 'selectionOrigin'
      @"positionX": @(selectionOrigin.x),
                      ^
2 errors generated.

Didn't investigate yet.

mountiny commented 1 year ago

@fabioh8010 with the reanmiated changes feel free to post in #open-source channel and tag Tomek Zawadski and we might get help from them. I will try to ask Rory for help in terms of the branch

perunt commented 1 year ago

I can help with resolving iOS build errors related to custom properties positionY/X since I was involved in implementing this functionality

perunt commented 1 year ago

@fabioh8010 I noticed that the selectionOrigin variable was not defined. This may have been an oversight on my part. To resolve this issue, you can define selectionOrigin in the textInputDidChangeSelection method in Libraries/Text/TextInput/RCTBaseTextInputView.m as follows:

- (void)textInputDidChangeSelection
{
  if (!_onSelectionChange) {
    return;
  }

  RCTTextSelection *selection = self.selection;
  UITextRange *selectedTextRange = self.backedTextInputView.selectedTextRange;
  CGPoint selectionOrigin = [self.backedTextInputView caretRectForPosition:selectedTextRange.start].origin;

  _onSelectionChange(@{
    @"selection" : @{
      @"start" : @(selection.start),
      @"end" : @(selection.end),
      @"positionY": @(selectionOrigin.y),
      @"positionX": @(selectionOrigin.x),
    },
  });
}

fabioh8010 commented 1 year ago

Update

✅ All platforms are building now.

Updated react-native-reanimated library to 3.1.0 in order to fix the remaining Android build error.
Created a temporary patch to fix iOS build following @perunt's suggestions.

@mountiny I guess that at this point now we can start involving QA to help test the application and find problems.

perunt commented 1 year ago

Created a temporary patch to fix iOS build following @perunt's suggestions.

I'll prepare PR for our fork to fix it as well

fabioh8010 commented 1 year ago

Update

Created a issue and a PR about the patches I made in the libraries.
Merged branch with main
Currently investigating why unit tests are failing:
- 314 of 534 tests are failing, the two most common reasons are ReferenceError: setImmediate is not defined and thrown: "Exceeded timeout of 5000 ms for a hook. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

mountiny commented 1 year ago

@fabioh8010 Sorry was at a conference. Would we be good to add the Ready to Build label and try the build for QA?

fabioh8010 commented 1 year ago

@mountiny Yes, I think we are good for testing now. All platforms are building and running, I'm getting some crashes in iOS when navigating from Chat to Sidebar but besides it we could already build it for QA play around and find issues.

mountiny commented 1 year ago

triggered build

fabioh8010 commented 1 year ago

@mountiny Looks like the Android and iOS build failed, where can I take a look at the build logs?

fabioh8010 commented 1 year ago

Update

Unit tests failing

I didn't find a solution for this yet. The two majority errors are:

ReferenceError: setImmediate is not defined

Example of error:

 FAIL  tests/unit/SidebarTest.js (12.844 s)
  ● Sidebar › archived chats › renders the archive reason as the preview message of the chat

    ReferenceError: setImmediate is not defined

      6 |  * @returns {Promise}
      7 |  */
    > 8 | export default () => new Promise(setImmediate);
        |                                  ^
      9 |

      at setImmediate (tests/utils/waitForPromisesToResolve.js:8:34)
      at Object.<anonymous> (tests/unit/SidebarTest.js:55:41)

Neither setImmediate and clearImmediate are available during tests, I tried to define a mock version by myself e.g.:

global.setImmediate = global.setImmediate || function(fn) { return setTimeout(fn, 0); };
global.clearImmediate = global.clearImmediate || global.clearTimeout;

It solves the problem but I wouldn't say that's the path to go without understanding why this errors started to show up.

Exceeded timeout of 5000 ms for a hook. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test.

Example of error:

 FAIL  tests/unit/SidebarOrderTest.js (98.761 s)
  ● Sidebar › in default mode › is not rendered when there are no props passed to it

    thrown: "Exceeded timeout of 5000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      1 | import Onyx from 'react-native-onyx';
    > 2 | import {cleanup, screen} from '@testing-library/react-native';
        | ^
      3 | import lodashGet from 'lodash/get';
      4 | import waitForPromisesToResolve from '../utils/waitForPromisesToResolve';
      5 | import * as LHNTestUtils from '../utils/LHNTestUtils';

      at Object.afterEach (node_modules/@testing-library/react-native/src/index.ts:13:5)
      at Object.<anonymous> (tests/unit/SidebarOrderTest.js:2:1)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)

It seems that all related test errors point to the same import, import {cleanup, screen} from '@testing-library/react-native';. Maybe it's a compatibility issue with new RN version, will investigate more.

I also noticed that we have this comment on jest.config.js file.

module.exports = {
    // TODO: change this back to preset: 'react-native' once we are able fix the tests on React Native >= 0.71.2
    preset: '@testing-library/react-native',
    ...
};

It was introduced in this commit. @priyeshshah11 Do you have some context about this change?

iOS crashes

I'm getting this crash sometimes when navigating between the chat and the sidebar:

2023-05-15 18:09:38.512311+0100 New Expensify[54437:738696] *** Assertion failure in -[REANodesManager uiManager:performMountingWithBlock:](), /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native-reanimated/ios/REANodesManager.mm:246
2023-05-15 18:09:38.524994+0100 New Expensify[54437:738696] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Mouting block is expected to not be set'
*** First throw call stack:
(
    0   CoreFoundation                      0x000000011b4328ab __exceptionPreprocess + 242
    1   libobjc.A.dylib                     0x000000010f5a0ba3 objc_exception_throw + 48
    2   Foundation                          0x000000011573d271 -[NSMutableDictionary(NSMutableDictionary) classForCoder] + 0
    3   New Expensify                       0x0000000101a81241 -[REANodesManager uiManager:performMountingWithBlock:] + 289
    4   New Expensify                       0x0000000101c69051 -[RCTUIManagerObserverCoordinator uiManager:performMountingWithBlock:] + 529
    5   New Expensify                       0x0000000101c62f02 -[RCTUIManager flushUIBlocksWithCompletion:] + 626
    6   New Expensify                       0x0000000101c62c10 -[RCTUIManager _layoutAndMount] + 832
    7   New Expensify                       0x0000000101c628c1 -[RCTUIManager batchDidComplete] + 33
    8   New Expensify                       0x0000000101a805bf -[RCTUIManager(SyncUpdates) runSyncUIUpdatesWithObserver:] + 335
    9   New Expensify                       0x0000000101a81987 __36-[REANodesManager performOperations]_block_invoke + 695
    10  New Expensify                       0x0000000101c699dd __RCTExecuteOnUIManagerQueue_block_invoke + 29
    11  libdispatch.dylib                   0x000000011b0f4d18 _dispatch_call_block_and_release + 12
    12  libdispatch.dylib                   0x000000011b0f5f5b _dispatch_client_callout + 8
    13  libdispatch.dylib                   0x000000011b0fdd41 _dispatch_lane_serial_drain + 1064
    14  libdispatch.dylib                   0x000000011b0feb1b _dispatch_lane_invoke + 441
    15  libdispatch.dylib                   0x000000011b10cf13 _dispatch_workloop_worker_thread + 959
    16  libsystem_pthread.dylib             0x000000011ed93ce3 _pthread_wqthread + 326
    17  libsystem_pthread.dylib             0x000000011ed92c67 start_wqthread + 15
)
libc++abi: terminating with uncaught exception of type NSException
Message from debugger: Terminated due to signal 6

https://github.com/Expensify/App/assets/20051562/a3616eb4-ea83-4629-9bd6-ffab9287f41e

Since we are already using the latest react-native-reanimated version on this PR, I'll tag Tomek Zawadski on Slack to see if he can help.

mountiny commented 1 year ago

@fabioh8010 here is the build run https://github.com/Expensify/App/actions/runs/4983345153

priyeshshah11 commented 1 year ago

It was introduced in this commit. @priyeshshah11 Do you have some context about this change?

Hi @fabioh8010, I did not introduce that change. It was already there but I had removed it assuming things will work without it in 0.71.2 but it did not so we decided to add it back. @roryabraham might know the real reason why that is there. Either way as per the comment I think we should be good to remove it if we can make the tests work without it.

fabioh8010 commented 1 year ago

Update

Fixed iOS crashes with Tomek Zawadski's help, now we are going to use a nightly build of react-native-reanimated until we have a release with the latest fixes.
Updated lottie-react-native to 5.1.6 which fixes the Android builds, so I removed my patch as well.
Made some adjustments which I believe will solve the build problems in GitHub.

@mountiny Could you trigger another build? Thanks.

roryabraham commented 1 year ago

New build triggered here

fabioh8010 commented 12 months ago

Update

Merged branch with main.
All unit tests are passing now ✅
Investigating the build errors reported by CI. I think the iOS build failed because it wasn't updated with main branch, but Android seems to be another cause.

mountiny commented 12 months ago

Running the build again to see if merging main helped :)

fabioh8010 commented 12 months ago

I'm following the builds, iOS seems promising now but Android already failed.

I'm able to reproduce the Android build error if I run the same Gradle task Fastlane is running, assembleInternalRelease.

> Task :app:createBundleInternalReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:createBundleInternalReleaseJsAndAssets'.
> Couldn't determine Hermesc location. Please set `react.hermesCommand` to the path of the hermesc binary file. node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc

Since it's happening locally I can investigate more easily. It's probably related to our RN fork but I need to confirm.

mountiny commented 12 months ago

Great, thanks!

fabioh8010 commented 11 months ago

Update: I didn't have too much time to investigate the internal release build problem yet, as I have been working on TS migration proposal. Will try to return to this as soon as possible.

fabioh8010 commented 11 months ago

Update

Yesterday, fixed an issue with the publish script in our RN fork which was not bundling hermesc inside the package. Android builds are now working on GH Actions, but iOS failed (I suspect that is because I generated a version without changing it's "name")

Today I generated another release, identical to the previous one but with a different version name. I hope that this will solve iOS cocoapods failing on GH Actions.

@mountiny Could you please trigger another build for us? Thanks.

roryabraham commented 11 months ago

Triggered build here

fabioh8010 commented 11 months ago

Hi @roryabraham , iOS build failed with this error:

It's not the first time I saw this one, is this something that happens randomly?

roryabraham commented 11 months ago

@fabioh8010 can you merge main to resolve conflicts before we try again?

fabioh8010 commented 11 months ago

@roryabraham Done!

roryabraham commented 11 months ago

https://github.com/Expensify/App/actions/runs/5147752902

fabioh8010 commented 11 months ago

@roryabraham I keep getting this error during cocoapods step

I'm not having this problem locally, which makes me thinking if it's a cache issue. Is there a way to trigger a build and clear the cache?

fabioh8010 commented 11 months ago

@mountiny We have working builds now 🎉 We could start assigning a tester to test the RN update, wdyt?

aimane-chnaif commented 11 months ago

I am assigned as C+ reviewer here. Shall I start testing?

roryabraham commented 11 months ago

I'm not sure if we should really test this fully yet because we need to be using our fork instead of @fabioh8010's in production.

fabioh8010 commented 11 months ago

@roryabraham My fork is based on Expensify's one with just some minor fixes to make the release work properly, but I'm bringing the discussion to our thread again so we can get this resolved more quickly!

mountiny commented 11 months ago

@roryabraham in case we would like to drop our RN fork, should we close this Pr and create a new fresh PR so there is not that much clutter here?

roryabraham commented 11 months ago

I think we have consensus to drop our RN fork, which means that we can just upgrade to an upstream release - either https://github.com/facebook/react-native/releases/tag/v0.72.0-rc.5 or a newer nightly build

fabioh8010 commented 11 months ago

@roryabraham I think we should wait for at least RC.6 or 0.72 official, there are some issues with RC.5 and some fixes that are going to be available on RC.6.

As for the nightly builds, the problem we have right now is that is difficult to see the changes we have to do in the project besides changing package.json. When updating RN versions we use this tool to guide us through the changes in a project, but it doesn't have support for nightly builds. We already have a issue about this and I plan to work on this feature on my free time, but it may take a while.

roryabraham commented 11 months ago

@fabioh8010 https://github.com/facebook/react-native/releases/tag/v0.72.0-rc.6 has landed, let's pick this PR up and try to get it over the finish line with the upstream dependency instead of our fork. Thanks 🚀

fabioh8010 commented 11 months ago

Yes, this one is much more stable, will go back to this tomorrow!

fabioh8010 commented 11 months ago

Update

Updated app to use RN 0.72.0-rc.6
Having build issues with Android, iOS and Desktop. No solutions for now, will investigate the root cause of the problems below.

Android

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':tasks'.
> Could not create task ':oguzhnatly_react-native-image-manipulator:compileDebugJavaWithJavac'.
   > In order to compile Java 9+ source, please set compileSdkVersion to 30 or above

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4m 28s

iOS

error: Error: Unable to resolve module ./LogBoxImages/close.png from /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/react-native/Libraries/LogBox/UI/LogBoxNotification.js: 

None of these files exist:
  * node_modules/react-native/Libraries/LogBox/UI/LogBoxImages/close.png(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json|.ios.svg|.native.svg|.svg)
  * node_modules/react-native/Libraries/LogBox/UI/LogBoxImages/close.png/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json|.ios.svg|.native.svg|.svg)
  105 |         style={dismissStyles.press}>
  106 |         <Image
> 107 |           source={require('./LogBoxImages/close.png')}
      |                            ^
  108 |           style={dismissStyles.image}
  109 |         />
  110 |       </LogBoxButton>
    at ModuleResolver.resolveDependency (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:472:35)
    at Graph._processModule (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:260:38)
    at async Graph._addDependency (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 5)
    at async Graph._processModule (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:321:5)
    at async Graph._addDependency (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 14)

Desktop

[Electron] App threw an error during load
[Electron] Error: Cannot find module 'electron-serve'
[Electron] Require stack:
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dev.js
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js
[Electron] - 
[Electron]     at Module._resolveFilename (node:internal/modules/cjs/loader:963:15)
[Electron]     at n._resolveFilename (node:electron/js2c/browser_init:2:109751)
[Electron]     at Module._load (/Users/fabiohenriques/.npm/_npx/a9286e5dc762839a/node_modules/runtime-required/runtime-required.js:28:44)
[Electron]     at Module.require (node:internal/modules/cjs/loader:1035:19)
[Electron]     at require (node:internal/modules/cjs/helpers:102:18)
[Electron]     at electron-serve (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:4167:18)
[Electron]     at __webpack_require__ (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:8292:42)
[Electron]     at eval (webpack://new.expensify/./desktop/main.js?:3:15)
[Electron]     at ./desktop/main.js (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:38:1)
[Electron]     at __webpack_require__ (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:8292:42)

fabioh8010 commented 11 months ago

RN 0.72.0 is out 🎉 I will update the PR to target it!

mountiny commented 11 months ago

@fabioh8010 Could we also bump these other packages https://github.com/Expensify/App/issues/21308

parasharrajat commented 11 months ago

@mountiny It might be good to do that in separate PR to keep the impact minimal and review easy.

roryabraham commented 11 months ago

Agree with @parasharrajat here, let's focus on upgrading just RN here and handle Reanimated, GH, and Screens in separate PR(s).

fabioh8010 commented 11 months ago

@roryabraham @parasharrajat Just FYI that in this PR I'm already bumping Reanimated to 3.3.0, so I don't think it will be troublesome to bumping the others too but it's up to you (...unless I won't be able to proceed with the PR without bumping all libraries, in this case we don't have a option).

I'm still investigating the problems above (coming to a solution about iOS problem).

roryabraham commented 11 months ago

@fabioh8010 I didn't realize the new package versions introduce support for RN 0.72, so I take it back and think it's fine to include here.

fabioh8010 commented 11 months ago

Update

Android, iOS and Web builds are working ✅
Desktop still failing ❌
Created a patch file for @oguzhnatly/react-native-image-manipulator. Looks like we are using our own fork here.

Desktop error:

[Electron] App threw an error during load
[Electron] Error: Cannot find module 'electron-serve'
[Electron] Require stack:
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dev.js
[Electron] - /Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js
[Electron] - 
[Electron]     at Module._resolveFilename (node:internal/modules/cjs/loader:963:15)
[Electron]     at n._resolveFilename (node:electron/js2c/browser_init:2:109751)
[Electron]     at Module._load (/Users/fabiohenriques/.npm/_npx/a9286e5dc762839a/node_modules/runtime-required/runtime-required.js:28:44)
[Electron]     at Module.require (node:internal/modules/cjs/loader:1035:19)
[Electron]     at require (node:internal/modules/cjs/helpers:102:18)
[Electron]     at electron-serve (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:4167:18)
[Electron]     at __webpack_require__ (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:8292:42)
[Electron]     at eval (webpack://new.expensify/./desktop/main.js?:3:15)
[Electron]     at ./desktop/main.js (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:38:1)
[Electron]     at __webpack_require__ (/Users/fabiohenriques/Documents/Work/Callstack/Projects/Expensify/expensify-app/desktop/dist/main.js:8292:42)

roryabraham commented 11 months ago

@fabioh8010 Electron build worked fine on this branch for me. Maybe try doing this:

cd desktop
rm -rf node_modules
cd ..
npm i

Expensify / App

Update App to React Native 0.72 version #18507

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Update

Update

Android build errors

iOS build errors

Update

Update

Update

Unit tests failing

ReferenceError: setImmediate is not defined

Exceeded timeout of 5000 ms for a hook. Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test.

iOS crashes

Update

Update

Update

Update

Update