Research into upgrading react-native #14386

siddarthkay · 2022-11-17T08:51:17Z

Rn Upgrade helper is here : https://react-native-community.github.io/upgrade-helper/
Current version of React Native is 0.63.5
Attempt to upgrade to 0.68.5
Wish to ultimately reach 0.70.x (So far it's only possible to aim for 0.68.5)

Rough todos below :

for android : Figure out the change here https://github.com/status-im/status-mobile/blob/develop/nix/pkgs.nix
Some research on latest version that clojurescript officially supports ( I believe latest versions of React Native require us to switch to latest versions of Reactjs as well )

Attempt and log findings on upgrading IOS while ignoring Android

update dependencies and dev dependencies in package.json
update metro config
update ios/~/Info.plist
update ios/~/AppDelegate.m
update ios/~xcworkspace/contents.xcworkspacedata
update ios/~.xcodeproj/xcshareddata/xcschemes/RnDiffApp.xcscheme
update ios/~.xcodeproj/project.pbxproj
update ios/Podfile
update .flowconfig

- Android Related Stuff

update android/gradle.properties
update android/build.gradle
update android/app/src/main/res/values/styles.xml
update android/app/src/main/AndroidManifest.xml
update android/app/src/debug/AndroidManifest.xml
update android/app/build.gradle

Take care of Libraries specially modified to work with Older Versions of React Native

react-native-hole-view
react-native-mail

siddarthkay · 2022-11-17T09:06:41Z

We use Reagent for Reactjs and Reagent does not support Reactjs version 18 yet reagent-project/reagent#554
So the furthest we should aim at the moment would be to upgrade React Native which uses Reactjs 17 and that would be React Native 0.68.5

flexsurfer · 2022-11-24T18:50:33Z

RNN wix/react-native-navigation#7466

siddarthkay · 2022-12-01T08:22:03Z

When attempting to upgrade react-native to 0.65 I currently run into this error while running make run-ios

Please file a bug at https://feedbackassistant.apple.com with this warning message and any useful information you can provide.
** BUILD FAILED **


The following build commands failed:
	PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/siddarthkumar/Library/Developer/Xcode/DerivedData/StatusIm-fxiitjbbybrcsqcxqartjfyvqxdo/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-C58A79D8656A804AAC57ACF6A48D5309.sh 
	(in target 'FBReactNativeSpec' from project 'Pods')
(1 failure)

info Run CLI with --verbose flag for more details.
make: *** [run-ios] Error 1

Investigating further.

siddarthkay · 2022-12-01T08:52:34Z

related : react-native-community/upgrade-support#138

siddarthkay · 2022-12-01T09:40:15Z

On opening XCode there is a more detailed version of the error and it is


Error: Could not determine react-native-codegen location. Try running 'yarn install' or 'npm install' in your project root.
Command PhaseScriptExecution failed with a nonzero exit code

trying out possible solutions outlined here : https://stackoverflow.com/questions/66805844/xcode-12-4-react-native-build-failed-in-ios-showing-all-messages-command-phasesc

flexsurfer · 2022-12-01T09:48:09Z

just wondering if it does make sense to upgrade gradually, i think in each steps there will be lots of issues, just related to the version, so it's better to start upgrading to the latest version imho

flexsurfer · 2022-12-01T09:50:23Z

or, i would probably try to create a new project, with our setup and then upgrade the entire project from scratch, because we're working on 2.0 and we'll have lots of testing, so it's a good opportunity to make structure and RN project from scratch, wdyt ?

siddarthkay · 2022-12-01T09:52:33Z

just wondering if it does make sense to upgrade gradually, i think in each steps there will be lots of issues, just related to the version, so it's better to start upgrading to the latest version imho

Hmm the latest we could go so far would be 0.67. i am currently researching to see what is the least version we can reach without issues. All upgrades will have issues eventually but I wanted to establish some baseline. Also the issues we face in minor upgrades will also exist in major ones so I feel it's better to take on smaller issues one by one..

siddarthkay · 2022-12-01T09:59:44Z

or, i would probably try to create a new project, with our setup and then upgrade the entire project from scratch, because we're working on 2.0 and we'll have lots of testing, so it's a good opportunity to make structure and RN project from scratch, wdyt ?

Well that was my initial thought and it would be a better way to upgrade if you could set up a brand new React native app with v0.67
I was under the impression that there were some challenges in the way the existing project is set up, but if you could get this up and running that would be awesome!

flexsurfer · 2022-12-04T11:30:51Z

https://www.metosin.fi/blog/reagent-towards-react-18/

siddarthkay · 2022-12-08T19:07:12Z

Got the IOS app to run successfully on major react-native version upgrade of v0.64.4

small wins 🥳

siddarthkay · 2022-12-08T20:14:21Z

One benefit I am seeing right away is that copy-pasting now works on IOS simulators,
I don't know if its because the simulator is running IOS 16.1 or because we upgraded to react-native 0.64.4
Either way I am happy that this functionality works.

Screen.Recording.2022-12-09.at.1.42.36.AM.mov

siddarthkay · 2022-12-08T20:56:51Z

successfully upgraded IOS App to v0.65.3 , I am on a roll today 😎

jakubgs · 2022-12-08T23:02:44Z

Nice!

flexsurfer · 2022-12-09T05:13:20Z

One benefit I am seeing right away is that copy-pasting now works on IOS simulators, I don't know if its because the simulator is running IOS 16.1 or because we upgraded to react-native 0.64.4 Either way I am happy that this functionality works.

Screen.Recording.2022-12-09.at.1.42.36.AM.mov

it's simulator bug, so it works already in develop with IOS 16.1

siddarthkay · 2022-12-09T06:33:40Z

It is now no surprise that the IOS app works with v0.66.5 as well,
After this I will attempt to go to v0.67.5 and if things go well I will then focus on gradually upgrading Android side as well.

Reason for stopping at v0.67.5 is that the next version of react-native 0.68.x does not work well with our navigation library : react-native-navigation.
We can not go beyond v0.68.5 because reagent does not support react 18 yet.

Will update this thread with more info.

siddarthkay · 2022-12-09T07:58:35Z

react-native upgraded to v0.67.5, will now focus on android side.

flexsurfer · 2022-12-09T08:57:30Z

It is now no surprise that the IOS app works with v0.66.5 as well, After this I will attempt to go to v0.67.5 and if things go well I will then focus on gradually upgrading Android side as well.

Reason for stopping at v0.67.5 is that the next version of react-native 0.68.x does not work well with our navigation library : react-native-navigation. We can not go beyond v0.68.5 because reagent does not support react 18 yet.

Will update this thread with more info.

both libraries work with latest RN and react versions

flexsurfer · 2022-12-09T08:57:46Z

so we should go to latest version

siddarthkay · 2022-12-09T09:16:37Z

both libraries work with latest RN and react versions

I'll upgrade further and find out if navigation works 👍🏻

flexsurfer · 2023-01-18T09:20:01Z

cc @bitgamma

bitgamma · 2023-02-06T12:39:48Z

@siddarthkay try to change this

status-mobile/ios/StatusIm/AppDelegate.mm

Line 52 in d81a1a2

extern NSString* StatusgoImageServerTLSCert();

with extern "C" NSString* StatusgoImageServerTLSCert();

siddarthkay · 2023-02-06T12:42:24Z

@bitgamma : I'll try this again today,
but as far as I can remember this change produced the same error when I was trying to fix it weeks ago..

siddarthkay · 2023-02-10T09:44:33Z

I fixed the issue with 0.68.5

status-mobile/ios/StatusIm/AppDelegate.mm

Line 98 in d81a1a2

UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"StatusIm", nil);

was the culprit.

I am doing some tests but 0.68.5 seems to be stable 🎉

flexsurfer · 2023-02-23T05:57:23Z

hey @siddarthkay any ETA when we could have 0.68.5 merged ?

siddarthkay · 2023-02-23T09:39:45Z

hey @siddarthkay any ETA when we could have 0.68.5 merged ?

Was focusing past few weeks on RC-1 and currently on 1 task that is in RC-2,
I do plan to spend time today to upgrade Gradle version and move android to 0.68.5

I can estimate that there will be a PR ready for QA by end of march month this year 😁 to review.
And we may have to spend sometime in April to fix potential issues that may arise.

siddarthkay · 2023-02-24T05:40:17Z

Got Gradle version up to v6.9 and resolved the issues that came with it..

siddarthkay · 2023-02-24T06:21:29Z

So this is the latest error while upgrading to react-native 0.65.3 on Android

To fix this we may have to update OkHttp Android Library,
ref : square/retrofit#3058

aaand the Yak Shaving continues ...

siddarthkay · 2023-02-24T06:23:30Z

hmmm, this makes sense : facebook/react-native#31382 , it seems to be a known issue

siddarthkay · 2023-02-24T09:00:22Z

upgrading to okHttp 4.9.1 fixes this issue 🥳
So react-native on android is now working for version 0.65.3

siddarthkay · 2023-02-24T09:41:14Z

smooth sailing so far and was able to upgrade android to react-native version 0.66.5

siddarthkay · 2023-02-24T12:56:31Z

Go the android side upgraded to react-native version 0.67.5 without upgrading gradle version to 7.2 as suggested in the upgrade helper. I am surprised by how everything works, but at the same moment I am happy that it works 😅

siddarthkay · 2023-02-24T18:41:34Z

on my way to react-native 0.68.x and the build fails when compiling react-native-reanimated with the following error message :

> Configure project :react-native-reanimated




****************************************************************************************





FAILURE: Build failed with an exception.

* Where:
Build file '/Users/siddarthkumar/code/experiments/status-mobile/node_modules/react-native-reanimated/android/build.gradle' line: 99

* What went wrong:
A problem occurred evaluating project ':react-native-reanimated'.
> No such property: minor for class: java.lang.String

* 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.

After looking into the change logs of react-native-reanimated library it seems like we have to update it to version 2.6.0
ref : https://github.com/software-mansion/react-native-reanimated/releases/tag/2.6.0
Trying that out 🫣

flexsurfer · 2023-02-25T06:05:32Z

actually we would want to upgrade all react native libs to latest

siddarthkay · 2023-02-25T06:57:22Z

siddarthkay · 2023-02-25T10:18:19Z

After upgrading the following :

Gradle from 6.9 -> 7.5
Gradle Plugin from 4.1.0 -> 7.3.0
OpenJDK8 -> OpenJDK11
buildToolsVersion 30.0 -> buildToolsVersion 31.0
react-native-reanimated library from 2.3.3 -> 2.11.0

We get this issue while cleaning up android and building it :

> Configure project :react-native-mail
WARNING:Using flatDir should be avoided because it doesn't support any meta-data formats.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/siddarthkumar/code/experiments/status-mobile/node_modules/react-native-mail/android/build.gradle' line: 4

* What went wrong:
A problem occurred evaluating project ':react-native-mail'.
> Unsupported value: 31. Format must be one of:
  - android-31
  - android-31-ext2
  - android-T
  - vendorName:addonName:31

* 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

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
See https://docs.gradle.org/7.5/userguide/command_line_interface.html#sec:command_line_warnings

Seems like some compatibility issue with react-native-mail
I see we have a fork of the package here : https://github.com/status-im/react-native-mail but in package.json we do not use the fork.
We could either update this fork and fix the Gradle issue over there and then use this forked package
OR
We could remove this library and use some more up-to-date and maintained alternative.. This option will involve some refactor in places where we share logs with QA team.

For time being I will attempt to remove react-native-mail package and comment out its imports and usage in our codebase to verify if we get a successful build or not 🤞🏻

siddarthkay · 2023-02-26T13:07:15Z

Okay so I do get a successful build after doing the following :

updating kotlinPluginVersion from 1.4.3 -> 1.6.20
adding a const in build.gradle for react-native-gesture-handler library to use kotlinPluginVersion
some temp hacks to add https://mvnrepository.com/artifact/com.github.gundy/semver4j to the nix-store
updating deps.json, deps.list and deps.urls by following instructions at https://github.com/status-im/status-mobile/tree/develop/nix/deps/gradle#known-issues, Big thanks to @jakubgs
upgrading react-native-gesture-handler from 2.5.0 -> 2.9.0
removing react-native-mail from the project.
removing react-native-hole-view from the project.

next steps :

modify forks of react-native-hole-view and react-native-mail to make them compatible with the upgraded Gradle and kotlin versions :)

After these tasks I believe we will have the android side working with react-native 0.68.5 😁 🫣 🤞🏻

siddarthkay · 2023-02-27T12:28:01Z

After using forked libraries of react-native-mail and react-native-hole-view

The app builds and runs successfully with react-native version 0.68 🥳

siddarthkay · 2023-02-28T06:29:48Z

known side effect on IOS Side : #15206

flexsurfer · 2023-03-03T07:54:19Z

hey @siddarthkay could you pls give short update on latest state

siddarthkay · 2023-03-03T08:26:52Z

hey @siddarthkay could you pls give short update on latest state

#15203 (comment) is the latest thing and @jakubgs is looking at it

siddarthkay · 2023-03-13T11:00:44Z

latest status update is as follows :
-> Android Builds work successfully on CI and IOS do not.
The latest pain is this stack trace :

 ▸ ❌  /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:224:33: use of undeclared identifier 'JS'
 ▸                   eventMapping:(JS::NativeAnimatedModule::EventMapping &)eventMapping)
 ▸        ^
 ▸ ❌  /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:227:76: property 'nativeEventPath' not found on object of type '__strong id'
 ▸   eventMappingDict[@"nativeEventPath"] = RCTConvertVecToArray(eventMapping.nativeEventPath());
 ▸                                 ^
 ▸ ❌  /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:229:20: property 'animatedValueTag' not found on object of type '__strong id'
 ▸   if (eventMapping.animatedValueTag()) {
 ▸                                                                            ^
 ▸ ❌  /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:230:61: property 'animatedValueTag' not found on object of type '__strong id'
 ▸     eventMappingDict[@"animatedValueTag"] = @(*eventMapping.animatedValueTag());

The IOS build however succeeds on my local environment :

Will debug and figure out the differences in my local vs CI environment and try to get this into testing this week 🤞🏻

flexsurfer · 2023-04-27T06:42:45Z

hey @siddarthkay could you pls give a short update, what's the status of this task? thanks

siddarthkay · 2023-04-27T07:07:40Z

@flexsurfer : To deal with errors below i have been given ssh access to one of the MacOS CI hosts, I am trying to recreate and solve on that host.

Should have another update early next week.

▸ ❌ /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:224:33: use of undeclared identifier 'JS'
▸ eventMapping:(JS::NativeAnimatedModule::EventMapping &)eventMapping)
▸ ^
▸ ❌ /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:227:76: property 'nativeEventPath' not found on object of type '__strong id'
▸ eventMappingDict[@"nativeEventPath"] = RCTConvertVecToArray(eventMapping.nativeEventPath());
▸ ^
▸ ❌ /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:229:20: property 'animatedValueTag' not found on object of type '__strong id'
▸ if (eventMapping.animatedValueTag()) {
▸ ^
▸ ❌ /Users/jenkins/workspace/status-mobile_prs_ios_PR-15203/node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm:230:61: property 'animatedValueTag' not found on object of type '__strong id'
▸ eventMappingDict[@"animatedValueTag"] = @(*eventMapping.animatedValueTag());

siddarthkay · 2023-06-19T13:08:29Z

Its safe to close this for now.
RN 0.69.10 was merged in : #16016

siddarthkay added the feature feature requests label Nov 17, 2022

siddarthkay self-assigned this Nov 17, 2022

siddarthkay changed the title ~~{WIP} research into upgrading react-native~~ [WIP] research into upgrading react-native Nov 17, 2022

flexsurfer assigned ibrkhalil Nov 17, 2022

flexsurfer mentioned this issue Nov 18, 2022

Should we upgrade React Native to v0.70.x? #14340

Closed

siddarthkay linked a pull request Nov 24, 2022 that will close this issue

[WIP] PR to upgrade react-native IOS side only #14437

Closed

siddarthkay added tech-debt E:Mobile React Native and removed feature feature requests labels Dec 1, 2022

siddarthkay mentioned this issue Feb 27, 2023

To accept kotlin & gradle versions from root project for React-native upgrade status-im/react-native-hole-view#1

Closed

siddarthkay mentioned this issue Feb 27, 2023

[WIP] React native upgrade from version 0.63.3 to 0.71.4 ? #15203

Closed

flexsurfer unassigned ibrkhalil Mar 21, 2023

siddarthkay mentioned this issue Mar 22, 2023

Test React Native Upgrade 68 with rosetta #15436

Closed

siddarthkay closed this as completed Jun 19, 2023

Research into upgrading react-native #14386

Research into upgrading react-native #14386

Comments

siddarthkay commented Nov 17, 2022 • edited

siddarthkay commented Nov 17, 2022

flexsurfer commented Nov 24, 2022

siddarthkay commented Dec 1, 2022 • edited

siddarthkay commented Dec 1, 2022

siddarthkay commented Dec 1, 2022 • edited

flexsurfer commented Dec 1, 2022

flexsurfer commented Dec 1, 2022

siddarthkay commented Dec 1, 2022

siddarthkay commented Dec 1, 2022

flexsurfer commented Dec 4, 2022

siddarthkay commented Dec 8, 2022

siddarthkay commented Dec 8, 2022

siddarthkay commented Dec 8, 2022

jakubgs commented Dec 8, 2022

flexsurfer commented Dec 9, 2022

siddarthkay commented Dec 9, 2022

siddarthkay commented Dec 9, 2022

flexsurfer commented Dec 9, 2022

flexsurfer commented Dec 9, 2022

siddarthkay commented Dec 9, 2022

flexsurfer commented Jan 18, 2023

bitgamma commented Feb 6, 2023

siddarthkay commented Feb 6, 2023 • edited

siddarthkay commented Feb 10, 2023

flexsurfer commented Feb 23, 2023

siddarthkay commented Feb 23, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

siddarthkay commented Feb 24, 2023

flexsurfer commented Feb 25, 2023

siddarthkay commented Feb 25, 2023

siddarthkay commented Feb 25, 2023 • edited

siddarthkay commented Feb 26, 2023

siddarthkay commented Feb 27, 2023

siddarthkay commented Feb 28, 2023

flexsurfer commented Mar 3, 2023

siddarthkay commented Mar 3, 2023

siddarthkay commented Mar 13, 2023 • edited by jakubgs

flexsurfer commented Apr 27, 2023

siddarthkay commented Apr 27, 2023

siddarthkay commented Jun 19, 2023

siddarthkay commented Nov 17, 2022 •

edited

siddarthkay commented Dec 1, 2022 •

edited

siddarthkay commented Dec 1, 2022 •

edited

siddarthkay commented Feb 6, 2023 •

edited

siddarthkay commented Feb 25, 2023 •

edited

siddarthkay commented Mar 13, 2023 •

edited by jakubgs