Merge pull request #1450 from wordpress-mobile/update-rn-0-61

Update React Native to 0.61.5

.circleci/config.yml

@@ -6,13 +6,13 @@ commands:
       - restore_cache:
           name: Restore Yarn Cache
           keys:
-            - yarn-i18n-v4-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
+            - yarn-i18n-v4-cache-v{{ .Environment.CACHE_TRIGGER_VERSION }}-job-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
       - run:
           name: Yarn Install
-          command: yarn install --frozen-lockfile --prefer-offline
+          command: yarn install --frozen-lockfile --prefer-offline --network-concurrency 1
       - save_cache:
           name: Save Yarn Cache
-          key: yarn-i18n-v4-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
+          key: yarn-i18n-v4-cache-v{{ .Environment.CACHE_TRIGGER_VERSION }}-job-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
             - i18n-cache/data
@@ -112,20 +112,23 @@ jobs:
     - restore_cache:
         name: Restore Dependencies Cache
         keys:
-        - dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}-{{
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}-{{
           checksum "yarn.lock" }}
-        - dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}
-        - dependencies-v2-
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}
+        - dependencies-v3-
     - run:
         name: Yarn preios (if needed)
         command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app || yarn preios
     - save_cache:
         name: Save Dependencies Cache
-        key: dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}-{{
+        key: dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}-{{
           checksum "yarn.lock" }}
         paths:
-        - react-native-aztec/ios/Carthage
-        - ~/.rncache
+        - ios/Pods
+        - ~/Library/Caches/CocoaPods
+        - ~/.cocoapods/repos/trunk
+        - ios/vendor
     - run:
         name: Build (if needed)
         command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app || yarn react-native run-ios --configuration Release --no-packager

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
 		},
 		react: {
 			pragma: "React",
-			version: "16.8.3",
+			version: "detect",
 			flowVersion: "0.92.0",
 		},
 	},

.flowconfig

@@ -43,9 +43,6 @@
 <PROJECT_ROOT>/node_modules/jest-enzyme/.*
 <PROJECT_ROOT>/node_modules/enzyme-matchers/.*
 
-; Ignore react-native-recyclerview-list example app
-<PROJECT_ROOT>/node_modules/react-native-recyclerview-list/example
-
 ; Ignore immutable-js. See https://github.com/facebook/immutable-js/issues/1308
 <PROJECT_ROOT>/node_modules/immutable/.*
 

.gitignore

@@ -107,3 +107,8 @@ bin/wp-cli.phar
 
 # Report generated from jest-junit
 /junit.xml
+
+# Cocoapods
+
+ios/Pods
+ios/vendor

Gutenberg.podspec

@@ -19,8 +19,8 @@ Pod::Spec.new do |s|
   s.swift_version = '5.0'
 
   s.dependency 'React', react_native_version
+  s.dependency 'React-CoreModules', react_native_version
   s.dependency 'React-RCTImage', react_native_version
 
-  s.dependency 'WordPress-Aztec-iOS'
   s.dependency 'RNTAztecView'
 end

RNTAztecView.podspec

@@ -18,6 +18,6 @@ Pod::Spec.new do |s|
   s.xcconfig         = {'OTHER_LDFLAGS' => '-lxml2',
                         'HEADER_SEARCH_PATHS' => '/usr/include/libxml2'}
   s.dependency         'React-Core'
-  s.dependency         'WordPress-Aztec-iOS'
+  s.dependency         'WordPress-Aztec-iOS', '1.15.0'
 
 end

__device-tests__/gutenberg-editor-paragraph.test.js

@@ -13,6 +13,7 @@ import {
 	clickBeginningOfElement,
 	stopDriver,
 	isAndroid,
+	swipeUp,
 } from './helpers/utils';
 import testData from './helpers/test-data';
 
@@ -115,6 +116,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 		await editorPage.sendTextToParagraphBlockAtPosition( 1, testData.longText );
 
 		for ( let i = 3; i > 0; i-- ) {
+			await swipeUp( driver );
 			await editorPage.removeParagraphBlockAtPosition( i );
 		}
 	} );

__device-tests__/helpers/utils.js

@@ -116,28 +116,9 @@ const setupDriver = async () => {
 
 	await driver.setImplicitWaitTimeout( 2000 );
 	await timer( 3000 );
-	await driver.setOrientation( 'PORTRAIT' );
 
-	// Proxy driver to patch functions on Android
-	// This is needed to adapt to changes in the way accessibility ids are being
-	// assigned after migrating to AndroidX and React Native 0.60. See:
-	// https://github.com/wordpress-mobile/gutenberg-mobile/pull/1112#issuecomment-501165250
-	// for more details.
-	return new Proxy( driver, {
-		get: ( original, property ) => {
-			const propertiesToPatch = [
-				'elementByAccessibilityId',
-				'hasElementByAccessibilityId',
-			];
-			if ( isAndroid() && ( propertiesToPatch.includes( property ) ) ) {
-				return async function( value, cb ) {
-					// Add a comma and a space to all ids
-					return await original[ property ]( `${ value }, `, cb );
-				};
-			}
-			return original[ property ];
-		},
-	} );
+	await driver.setOrientation( 'PORTRAIT' );
+	return driver;
 };
 
 const stopDriver = async ( driver: wd.PromiseChainWebdriver ) => {

__device-tests__/pages/editor-page.js

@@ -22,12 +22,6 @@ export default class EditorPage {
 	imageBlockName = 'Image';
 	galleryBlockName = 'Gallery';
 
-	// This is needed to adapt to changes in the way accessibility ids are being
-	// assigned after migrating to AndroidX and React Native 0.60. See:
-	// https://github.com/wordpress-mobile/gutenberg-mobile/pull/1112#issuecomment-501165250
-	// for more details.
-	accessibilityIdSuffix = '';
-
 	constructor( driver: wd.PromiseChainWebdriver ) {
 		this.driver = driver;
 		this.accessibilityIdKey = 'name';
@@ -36,8 +30,9 @@ export default class EditorPage {
 		if ( isAndroid() ) {
 			this.accessibilityIdXPathAttrib = 'content-desc';
 			this.accessibilityIdKey = 'contentDescription';
-			this.accessibilityIdSuffix = ', ';
 		}
+
+		driver.setImplicitWaitTimeout( 5000 );
 	}
 
 	async getBlockList() {
@@ -106,7 +101,7 @@ export default class EditorPage {
 	}
 
 	async getTextViewForHtmlViewContent() {
-		const accessibilityId = `html-view-content${ this.accessibilityIdSuffix }`;
+		const accessibilityId = 'html-view-content';
 		let blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]`;
 
 		if ( ! isAndroid() ) {
@@ -177,13 +172,11 @@ export default class EditorPage {
 		if ( ! await this.hasBlockAtPosition( position, blockName ) ) {
 			throw Error( `No Block at position ${ position }` );
 		}
-		const parentId = `${ blockName } Block. Row ${ position }.${ this.accessibilityIdSuffix }`;
-		const parentLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ parentId }"]`;
 
-		const blockId = `Move block up from row ${ position } to row ${ position - 1 }${ this.accessibilityIdSuffix }`;
+		const parentLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ blockName } Block. Row ${ position }."]`;
 		let blockLocator = `${ parentLocator }/following-sibling::*`;
 		blockLocator += isAndroid() ? '' : '//*';
-		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="${ blockId }"]`;
+		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="Move block up from row ${ position } to row ${ position - 1 }"]`;
 		const moveUpButton = await this.driver.elementByXPath( blockLocator );
 		await moveUpButton.click();
 	}
@@ -194,13 +187,10 @@ export default class EditorPage {
 			throw Error( `No Block at position ${ position }` );
 		}
 
-		const parentId = `${ blockName } Block. Row ${ position }.`;
-		const parentLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ parentId }")]`;
-
-		const blockId = `Move block down from row ${ position } to row ${ position + 1 }${ this.accessibilityIdSuffix }`;
+		const parentLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }.")]`;
 		let blockLocator = `${ parentLocator }/following-sibling::*`;
 		blockLocator += isAndroid() ? '' : '//*';
-		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="${ blockId }"]`;
+		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="Move block down from row ${ position } to row ${ position + 1 }"]`;
 		const moveDownButton = await this.driver.elementByXPath( blockLocator );
 		await moveDownButton.click();
 	}

android/app/build.gradle

@@ -73,7 +73,8 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    entryFile: "index.js",
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -93,6 +94,15 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and mirrored here.  If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
 android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
@@ -113,7 +123,7 @@ android {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86-64"
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }
     }
     buildTypes {
@@ -126,8 +136,8 @@ android {
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
-            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86-64": 4]
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
@@ -149,7 +159,6 @@ dependencies {
     implementation project(':react-native-video')
     implementation project(':react-native-svg')
     implementation project(':react-native-aztec')
-    implementation project(':react-native-recyclerview-list')
     implementation project(':react-native-gutenberg-bridge')
     implementation "org.wordpress:utils:$wordpressUtilsVersion"
     implementation 'androidx.appcompat:appcompat:1.0.0'
@@ -162,3 +171,5 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/proguard-rules.pro

@@ -8,10 +8,3 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}

android/app/src/main/AndroidManifest.xml

@@ -4,7 +4,6 @@
     android:versionName="1.0">
 
     <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
     <application
       android:name=".MainApplication"

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -17,7 +17,6 @@
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgePackage;
 
-import com.github.godness84.RNRecyclerViewList.RNRecyclerviewListPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -131,7 +130,6 @@ protected List<ReactPackage> getPackages() {
                         new ReactVideoPackage(),
                         new SvgPackage(),
                         new ReactAztecPackage(),
-                        new RNRecyclerviewListPackage(),
                         mRnReactNativeGutenbergBridgePackage);
             }
 

android/build.gradle

@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        gradlePluginVersion = '3.3.1'
+        gradlePluginVersion = '3.4.2'
         kotlinVersion = '1.3.11'
         buildToolsVersion = "28.0.3"
         minSdkVersion = 21
@@ -25,15 +25,13 @@ project.ext.buildGutenbergFromSource = project.properties.getOrDefault('wp.BUILD
 allprojects {
     repositories {
         mavenLocal()
-        google()
-        jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
-        }
-        maven {
-           // Local Maven repo containing AARs with JSC library built for Android
-           url "$rootDir/../node_modules/jsc-android/dist"
+            url("$rootDir/../node_modules/react-native/android")
         }
+
+        google()
+        jcenter()
+        maven { url 'https://jitpack.io' }
     }
 }

android/gradle.properties

@@ -16,5 +16,6 @@
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
+
+android.useAndroidX=true
 android.enableJetifier=true
-android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip

android/settings.gradle

@@ -1,4 +1,7 @@
 rootProject.name = 'gutenberg'
+
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
 include ':@react-native-community_slider'
 project(':@react-native-community_slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/src/android')
 include ':react-native-video'
@@ -7,8 +10,6 @@ include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-aztec'
 project(':react-native-aztec').projectDir = new File(rootProject.projectDir, '../react-native-aztec/android')
-include ':react-native-recyclerview-list'
-project(':react-native-recyclerview-list').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-recyclerview-list/android')
 include ':react-native-gutenberg-bridge'
 project(':react-native-gutenberg-bridge').projectDir = new File(rootProject.projectDir, '../react-native-gutenberg-bridge/android')
 

app.json

@@ -1,7 +1,4 @@
 {
-  "expo": {
-    "sdkVersion": "25.0.0"
-  },
   "name": "gutenberg",
   "displayName": "Gutenberg"
 }

bin/generate-podspecs.sh

@@ -18,7 +18,6 @@ DEST="${WD}/react-native-gutenberg-bridge/third-party-podspecs"
 EXTERNAL_PODSPECS=$(find "node_modules/react-native/third-party-podspecs" \
                          "node_modules/react-native-svg" \
                          "node_modules/react-native-keyboard-aware-scroll-view" \
-                         "node_modules/react-native-recyclerview-list" \
                          "node_modules/react-native-safe-area" \
                          "node_modules/react-native-dark-mode" -type f -name "*.podspec" -print)
 
@@ -34,7 +33,7 @@ done
 # Change to the React Native directory to get relative paths for the RN podspecs
 cd "node_modules/react-native"
 
-RN_PODSPECS=$(find * -type f -name "*.podspec" -not -path "third-party-podspecs/*" -print)
+RN_PODSPECS=$(find * -type f -name "*.podspec" -not -path "third-party-podspecs/*" -not -path "*Fabric*" -print)
 TMP_DEST=$(mktemp -d)
 
 for podspec in $RN_PODSPECS
@@ -49,7 +48,5 @@ do
     # Add a "prepare_command" entry to each podspec so that 'pod install' will fetch sources from the correct directory
     # and retains the existing prepare_command if it exists
     prepare_command="TMP_DIR=\$(mktemp -d); mv * \$TMP_DIR; cp -R \"\$TMP_DIR/${path}\"/* ."
-    cat "$TMP_DEST/$pod.podspec.json" | jq --arg CMD "$prepare_command" '.prepare_command = "\($CMD) && \(.prepare_command // true)"
-                                                                         # Point to React Native fork. To be removed once https://github.com/facebook/react-native/issues/25349 is closed
-                                                                         | .source.git = "https://github.com/jtreanor/react-native.git"' > "$DEST/$pod.podspec.json"
+    cat "$TMP_DEST/$pod.podspec.json" | jq --arg CMD "$prepare_command" '.prepare_command = "\($CMD) && \(.prepare_command // true)"' > "$DEST/$pod.podspec.json"
 done