Experiment/upgrade react native 66 (MetaMask#3509)

* Commit upgrade paths

* Checkpoint: iOS can build

* Reintroduce viewpager library with patch (deprecated)

* Upgrade keyboard aware library to support new RN

* Stabilize Android (WIP) need to patch react-native

* Remove setting NDK. Android auto sets it based on gradle

* Update build gradle + Add postinstall for react-native-codegen

* Add comment for postinstall (react-native-codegen)

* Remove workspace settings

* Upgrade gradle versions. Fix viewpager patch. Revert to support pre-upgrade min sdk versions

* Fix unit tests

* update rn codegen postinstall script

* Fix react-native-scrollable-tab-view with patch

* Update README.md ndk section

* update rn codegen postinstall script

* Update pod file lock

* update allow-scripts

* update yarn.lock

* Remove --strip-components=2

* Update ndk version to 21e

* Upgrade Detox + ignore warnings

* Enable Hermes. Reconfigure Flipper.

* Update pods

* Remove entitlements from copy resources step

* Polyfill Intl for iOS for Hermes

* Remove nvm related code in build phase

* Remove duplicate node from homebrew

* Remove engine version dependencies. Allow bitrise to use any node

* Reintroduce engines in package.json

* Try to unset PREFIX

* Reintroduce nvm compatibility in build phase

* Patch react-native-payments

* Expose removeListener warnings

* Patch react-native-modal removeListner

* Update build number

* Fix virtualization error on send flow

* Update build number to 3.8.2

* Ignore EventEmitter.removeListener

* Update build version for bitrise

* fixing broken e2e tests

* Replace drawer. Update reanimated + webview libraries. Begin fixing browser functionality.

* Hook up reanimated 2 on Android

* Remove traces of react navigation drawer. Refactor tutorial.

* Fix display account name on drawer.

* Fix patches -> fixes Android back button behavior

* Update build version

* Update build version to fix bitrise

* Re run unit tests

* Update readme with Flipper instructions

* Remove requestAnimationFramea and InteractionManager that causes iOS to crash when switching networks

* Update EasingNode

* Hide tab bar

* Fix browser deep link

* Upgrade web3 in controllers to fix app hang up.

* Remove isZero undefined from controllers

* Handle initial and subsequent deeplinks to browser

* Fix svg length undefined issue

* Update build number

* Fix BN function calls + patch swaps controller

* Update build number

* Disable Hermes for iOS.

* Disable hermes for Android

* Update build number

* unset PREFIX on all bitrise steps

* dimissing keyboard in wallet spec

* addressbook,wallet,request payment fix.

* update snapshots

* Remove intl polyfill

Co-authored-by: Ricky Miller <[email protected]>
Co-authored-by: Curtis <[email protected]>

.editorconfig

@@ -15,3 +15,7 @@ trim_trailing_whitespace = false
 [{package,package-lock}.json]
 indent_size = 2
 indent_style = space
+
+# Windows files
+[*.bat]
+end_of_line = crlf

.flowconfig

@@ -8,10 +8,6 @@
 ; Ignore polyfills
 node_modules/react-native/Libraries/polyfills/.*
 
-; These should not be required directly
-; require from fbjs/lib instead: require('fbjs/lib/warning')
-node_modules/warning/.*
-
 ; Flow doesn't support platforms
 .*/Libraries/Utilities/LoadingView.js
 
@@ -27,8 +23,9 @@ node_modules/react-native/flow/
 [options]
 emoji=true
 
-esproposal.optional_chaining=enable
-esproposal.nullish_coalescing=enable
+exact_by_default=true
+
+format.bracket_spacing=false
 
 module.file_ext=.js
 module.file_ext=.json
@@ -44,10 +41,6 @@ suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn
@@ -58,7 +51,6 @@ deprecated-type=warn
 unsafe-getters-setters=warn
 unnecessary-invariant=warn
 signature-verification-failure=warn
-deprecated-utility=error
 
 [strict]
 deprecated-type
@@ -70,4 +62,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.122.0
+^0.158.0

.gitattributes

@@ -1,3 +1,3 @@
-*.pbxproj -text
-# specific for windows script files
+# Windows files should use crlf line endings
+# https://help.github.com/articles/dealing-with-line-endings/
 *.bat text eol=crlf

.gitignore

@@ -29,6 +29,7 @@ app/bin
 .gradle
 local.properties
 *.iml
+*.hprof
 android/.project
 android/app/.project
 android/app/bin/

README.md

@@ -62,12 +62,7 @@ yarn watch
 -   Install the Android SDK, via [Android Studio](https://developer.android.com/studio).
     -   _MetaMask Only:_ To create production builds, you need to install Google Play Licensing Library via the SDK Manager in Android Studio.
 -   Install the Android NDK, via [Android Studio](https://developer.android.com/studio)'s SDK Manager.
-    -   In the SDK Manager, select the `SDK Tools` tab and install NDK version `17.2.4988734`. You'll need to click "Show Package Details" in order to select the appropriate version.
-        -   In the `android` directory, update the `local.properties` file by adding line:
-        ```
-        ndk.dir=/Users/YOUR_HOME_DIRECTORY/Library/Android/sdk/ndk/17.2.4988734
-        ```
-        _(You may have to create local.properties if it doesn't exist.)_
+    -   In the SDK Manager, select the `SDK Tools` tab and install NDK version `21.4.7075529`. You'll need to click "Show Package Details" in order to select the appropriate version.
 -   Linux only:
     -   Ensure that you have the `secret-tool` binary on your machine.
         -   Part of the [libsecret-tools](https://launchpad.net/ubuntu/bionic/+package/libsecret-tools) package on Debian/Ubuntu based distributions.
@@ -130,43 +125,30 @@ First, make sure you have the following running:
 -   Your Android emulator or iOS simulator
 -   `yarn start:android` or `yarn start:ios`
 
-Next, check that the React Native Debugger is working:
+Next, install the [Flipper](https://fbflipper.com/) desktop app (verified working with v0.127.0)
 
--   Open your emulator or simulator, and select `Debug JS Remotely` (or something similar) from its developer menu
--   To open the developer menu:
-    -   iOS Simulator: `Cmd + D`
-    -   Android Emulator
-        -   macOS: `Cmd + M` - Windows, Linux: `Ctrl + M`
--   If it doesn't open automatically, try navigating to this URL in Chrome: http://localhost:8081/debugger-ui/
--   If these steps do not take you to the React Native Debugger, something is wrong
+-   Once Flipper is installed, configure your system as follows:
+    -   Install react-devtools: `npm i -g [email protected]`
+    -   Update Android SDK location settings by accessing Flipper's settings via the `Gear Icon` -> `Settings`
+        -   Example SDK path: `/Users/<USER_NAME>/Library/Android/sdk`
 
-#### Debugging iOS (macOS Only)
+Finally, check that the debugger is working:
 
-For more details, see [this page](https://medium.com/@mattcroak718/debugging-your-iphone-mobile-web-app-using-safari-development-tools-71240657c487).
+-   Open your emulator or simulator alongside the Flipper app
+-   Flipper should auto-detect the device and the application to debug
+-   You should now be able to access features such as `Logs`
 
--   You should be able to inspect the mobile app using the console in the React Native Debugger in Chrome
--   To debug a website (dapp) in the browser:
-    -   Navigate to the website in the app's browser
-    -   Open Safari
-        -   Go to: _Preferences -> Advanced_ and select `Show Develop menu in menu bar`
-    -   Select `Develop` in the menu bar
-        -   Find your simulator in the second section from the top
-        -   Select the relevant WebView from the list
-            -   The simulator will highlight the WebView when you hover over it in Safari
+#### Debugging Physical iOS devices
 
-#### Debugging Android
-
-For more details, see [this page](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews).
-
--   You should be able to inspect the mobile app using the console in the React Native Debugger in Chrome
--   To debug a website (dapp) in the browser:
-    -   Navigate to the website in the app's browser
-    -   Go to chrome://inspect
-    -   Select the relevant WebView under **Remote Target**
+-   Debugging physical iOS devices requires `idb` to be installed, which consists of 2 parts
+-   Install the two idb parts:
+    1. `brew tap facebook/fb` & `brew install idb-companion`
+    2. `pip3.9 install fb-idb` (This step may require that you install python3 via `python -m pip3 install --upgrade pip`)
 
 #### Miscellaneous
 
 -   [Troubleshooting for React Native](https://facebook.github.io/react-native/docs/troubleshooting#content)
+-   [Flipper Documentation](https://fbflipper.com/docs/features/react-native/)
 
 ### Running Tests
 
@@ -194,11 +176,11 @@ yarn test:e2e:android
 
 Whenever you change dependencies (adding, removing, or updating, either in `package.json` or `yarn.lock`), there are various files that must be kept up-to-date.
 
-* `yarn.lock`:
-  * Run `yarn setup` again after your changes to ensure `yarn.lock` has been properly updated.
-* The `allow-scripts` configuration in `package.json`
-  * Run `yarn allow-scripts auto` to update the `allow-scripts` configuration automatically. This config determines whether the package's install/postinstall scripts are allowed to run. Review each new package to determine whether the install script needs to run or not, testing if necessary.
-  * Unfortunately, `yarn allow-scripts auto` will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
+-   `yarn.lock`:
+    -   Run `yarn setup` again after your changes to ensure `yarn.lock` has been properly updated.
+-   The `allow-scripts` configuration in `package.json`
+    -   Run `yarn allow-scripts auto` to update the `allow-scripts` configuration automatically. This config determines whether the package's install/postinstall scripts are allowed to run. Review each new package to determine whether the install script needs to run or not, testing if necessary.
+    -   Unfortunately, `yarn allow-scripts auto` will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
 
 ### Architecture
 

android/app/build.gradle

@@ -105,7 +105,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
 	entryFile: "index.js",
-	enableHermes: false
+	enableHermes: false //System.getenv('METAMASK_ENVIRONMENT') == 'production'
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -148,21 +148,20 @@ def jscFlavor = 'org.webkit:android-jsc:+'
  */
 def enableHermes = project.ext.react.get("enableHermes", false)
 
-android {
-
-	compileSdkVersion rootProject.ext.compileSdkVersion
+/**
+ * Architectures to build native code for in debug.
+ */
+def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
 
-	compileOptions {
-		sourceCompatibility JavaVersion.VERSION_1_8
-		targetCompatibility JavaVersion.VERSION_1_8
-	}
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
 
 	defaultConfig {
 		applicationId "io.metamask"
 		minSdkVersion rootProject.ext.minSdkVersion
 		targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 801
-		versionName "3.8.0"
+		versionCode 807
+		versionName "3.8.4"
 		multiDexEnabled true
 		testBuildType System.getProperty('testBuildType', 'debug')
 		missingDimensionStrategy "minReactNative", "minReactNative46"
@@ -210,6 +209,11 @@ android {
 		debug {
 			manifestPlaceholders = [isDebug:true]
 			signingConfig signingConfigs.debug
+			if (nativeArchitectures) {
+                ndk {
+                    abiFilters nativeArchitectures.split(',')
+                }
+            }
 			multiDexEnabled true
 		}
 		release {
@@ -233,7 +237,7 @@ android {
 			def abi = output.getFilter(OutputFile.ABI)
 			if (abi != null) {  // null for the universal-debug, universal-release variants
 				output.versionCodeOverride =
-					versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+					defaultConfig.versionCode * 1000 + versionCodes.get(abi)
 			}
 		}
 	}
@@ -260,20 +264,20 @@ dependencies {
 	androidTestImplementation('com.wix:detox:+') { transitive = true }
 	androidTestImplementation 'junit:junit:4.12'
 	implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-	implementation "com.squareup.okhttp3:okhttp:4.9.1"
-	implementation "com.squareup.okhttp3:logging-interceptor:4.9.1"
-	implementation "com.squareup.okhttp3:okhttp-urlconnection:4.9.1"
 
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
-      exclude group:'com.facebook.fbjni'
+	debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.fbjni'
     }
+
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
-		exclude group:'com.squareup.okhttp3', module:'okhttp'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
     }
+
     debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'
     }
+
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";
         debugImplementation files(hermesPath + "hermes-debug.aar")
@@ -286,7 +290,7 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-	from configurations.compile
+	from configurations.implementation
 	into 'libs'
 }
 

android/app/proguard-rules.pro

@@ -25,3 +25,10 @@
 
 # react-native-svg https://github.com/react-native-svg/react-native-svg#problems-with-proguard
 -keep public class com.horcrux.svg.** {*;}
+
+# react-native-reanimated https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Hermes
+# -keep class com.facebook.hermes.unicode.** { *; }
+# -keep class com.facebook.jni.** { *; }#

android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>

android/app/src/debug/java/io/metamask/ReactNativeFlipper.java → android/app/src/debug/java/com/flipper/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package io.metamask;
+package com.flipper;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

android/app/src/main/AndroidManifest.xml

@@ -101,7 +101,6 @@
 				<data android:scheme="https" android:host="metamask.io" />
 			</intent-filter>
 		</activity>
-		<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 		<!-- Explicitly opt-in to safe browsing -->
 		<meta-data android:name="android.webkit.WebView.EnableSafeBrowsing" android:value="true" />
 		<!-- Branch init -->

android/app/src/main/java/io/metamask/MainActivity.java

@@ -1,7 +1,7 @@
 package io.metamask;
 
 import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactFragmentActivity;
+import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactRootView;
 import com.mixpanel.android.mpmetrics.MixpanelAPI;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
@@ -18,7 +18,7 @@
 
 import org.devio.rn.splashscreen.SplashScreen;
 
-public class MainActivity extends ReactFragmentActivity {
+public class MainActivity extends ReactActivity {
 
 	/**
 	* Returns the name of the main component registered from JavaScript. This is used to schedule
@@ -46,7 +46,7 @@ protected void onStart() {
 
 	@Override
 	protected void onCreate(Bundle savedInstanceState) {
-		SplashScreen.show(this); 
+		SplashScreen.show(this);
 		super.onCreate(null);
 	}
 	@Override