Experiment - Android X migration

Gutenberg.podspec

@@ -1,6 +1,8 @@
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 # Use the same RN version that the JS tools use
 react_native_version = package['dependencies']['react-native']
+# Extract the tagged version if package.json points to a tag
+react_native_version = react_native_version.split("#v").last if react_native_version.include? "#v"
 
 Pod::Spec.new do |s|
   s.name             = 'Gutenberg'
@@ -14,19 +16,11 @@ Pod::Spec.new do |s|
   s.source_files = 'react-native-gutenberg-bridge/ios/*.{h,m,swift}'
   s.requires_arc = true
   s.preserve_paths = 'bundle/ios/*'
+  s.swift_version = '4.2'
 
-  s.dependency 'React/Core', react_native_version
-  s.dependency 'React/CxxBridge', react_native_version
-  s.dependency 'React/RCTAnimation', react_native_version
-  s.dependency 'React/RCTImage', react_native_version
-  s.dependency 'React/RCTLinkingIOS', react_native_version
-  s.dependency 'React/RCTNetwork', react_native_version
-  s.dependency 'React/RCTText', react_native_version
-  s.dependency 'React/RCTActionSheet', react_native_version
-  s.dependency 'React/DevSupport', react_native_version
+  s.dependency 'React', react_native_version
+  s.dependency 'React-RCTImage', react_native_version
 
   s.dependency 'WordPress-Aztec-iOS'
   s.dependency 'RNTAztecView'
-
-  s.dependency 'yoga', "#{react_native_version}.React"
 end

RNTAztecView.podspec

@@ -14,9 +14,10 @@ Pod::Spec.new do |s|
   s.public_header_files = 'react-native-aztec/ios/RNTAztecView/*.h'
   s.requires_arc     = true
   s.platforms        = { :ios => "10.0" }
+  s.swift_version    = '4.2'
   s.xcconfig         = {'OTHER_LDFLAGS' => '-lxml2',
 						'HEADER_SEARCH_PATHS' => '/usr/include/libxml2'}
-  s.dependency         'React'
+  s.dependency         'React-Core'
   s.dependency         'WordPress-Aztec-iOS'
 
 end

__device-tests__/helpers/utils.js

@@ -114,9 +114,28 @@ const setupDriver = async () => {
 
 	await driver.setImplicitWaitTimeout( 2000 );
 	await timer( 3000 );
-
 	await driver.setOrientation( 'PORTRAIT' );
-	return driver;
+
+	// 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 ];
+		},
+	} );
 };
 
 const stopDriver = async ( driver: wd.PromiseChainWebdriver ) => {

__device-tests__/pages/editor-page.js

@@ -21,6 +21,12 @@ export default class EditorPage {
 	headingBlockName = 'Heading';
 	imageBlockName = 'Image';
 
+	// 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';
@@ -29,6 +35,7 @@ export default class EditorPage {
 		if ( isAndroid() ) {
 			this.accessibilityIdXPathAttrib = 'content-desc';
 			this.accessibilityIdKey = 'contentDescription';
+			this.accessibilityIdSuffix = ', ';
 		}
 	}
 
@@ -50,7 +57,7 @@ export default class EditorPage {
 	}
 
 	async getTextViewForHtmlViewContent() {
-		const accessibilityId = 'html-view-content';
+		const accessibilityId = `html-view-content${ this.accessibilityIdSuffix }`;
 		let blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]`;
 
 		if ( ! isAndroid() ) {
@@ -123,11 +130,13 @@ 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 parentLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ blockName } Block. Row ${ position }."]`;
+		const blockId = `Move block up from row ${ position } to row ${ position - 1 }${ this.accessibilityIdSuffix }`;
 		let blockLocator = `${ parentLocator }/following-sibling::*`;
 		blockLocator += isAndroid() ? '' : '//*';
-		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="Move block up from row ${ position } to row ${ position - 1 }"]`;
+		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="${ blockId }"]`;
 		const moveUpButton = await this.driver.elementByXPath( blockLocator );
 		await moveUpButton.click();
 	}
@@ -138,10 +147,13 @@ export default class EditorPage {
 			throw Error( `No Block at position ${ position }` );
 		}
 
-		const parentLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ 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 }`;
 		let blockLocator = `${ parentLocator }/following-sibling::*`;
 		blockLocator += isAndroid() ? '' : '//*';
-		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="Move block down from row ${ position } to row ${ position + 1 }"]`;
+		blockLocator += `[@${ this.accessibilityIdXPathAttrib }="${ blockId }"]`;
 		const moveDownButton = await this.driver.elementByXPath( blockLocator );
 		await moveDownButton.click();
 	}
@@ -153,13 +165,14 @@ export default class EditorPage {
 			throw Error( `No Block at position ${ position }` );
 		}
 
-		const parentLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }.")]`;
+		const parentId = `${ blockName } Block. Row ${ position }.`;
+		const parentLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ parentId }")]`;
 		let removeBlockLocator = `${ parentLocator }/following-sibling::*`;
 		removeBlockLocator += isAndroid() ? '' : '//*';
 		let removeButtonIdentifier = `Remove block at row ${ position }`;
 
 		if ( isAndroid() ) {
-			removeButtonIdentifier += ', Double tap to remove the block';
+			removeButtonIdentifier += `, Double tap to remove the block${ this.accessibilityIdSuffix }`;
 			const block = await this.getBlockAtPosition( position, blockName );
 			let checkList = await this.driver.elementsByXPath( removeBlockLocator );
 			while ( checkList.length === 0 ) {

android/app/build.gradle

@@ -143,11 +143,6 @@ repositories {
     maven { url "https://jitpack.io" }
 }
 
-configurations.all {
-    resolutionStrategy {
-        force 'org.webkit:android-jsc:r236355'
-    }
-}
 
 dependencies {
     implementation project(':react-native-video')
@@ -156,7 +151,7 @@ dependencies {
     implementation project(':react-native-recyclerview-list')
     implementation project(':react-native-gutenberg-bridge')
     implementation "org.wordpress:utils:$wordpressUtilsVersion"
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    implementation 'androidx.appcompat:appcompat:1.0.0'
     implementation "com.facebook.react:react-native:+"  // From node_modules
 }
 

android/build.gradle

@@ -1,7 +1,7 @@
 buildscript {
     ext {
         gradlePluginVersion = '3.3.1'
-        kotlinVersion = '1.3.0'
+        kotlinVersion = '1.3.11'
         buildToolsVersion = "28.0.3"
         minSdkVersion = 21
         compileSdkVersion = 28

android/gradle.properties

@@ -16,3 +16,5 @@
 # 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.enableJetifier=true
+android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
+#Mon Jun 10 13:39:31 EDT 2019
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.3-all.zip

bin/generate-podspecs.sh

@@ -7,23 +7,48 @@ set -e
 cd "$( dirname $0 )"
 cd ..
 
-# Check for cocoapods
+# Check for cocoapods & jq
 command -v pod > /dev/null || ( echo Cocoapods is required to generate podspecs; exit 1 )
+command -v jq > /dev/null || ( echo jq is required to generate podspecs; exit 1 )
 
-PODSPECS=$(cat <<EOP
-node_modules/react-native/React.podspec
-node_modules/react-native/ReactCommon/yoga/yoga.podspec
-node_modules/react-native/third-party-podspecs/Folly.podspec
-node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
-node_modules/react-native/third-party-podspecs/glog.podspec
-EOP
-)
+WD=$(pwd)
+DEST="${WD}/react-native-gutenberg-bridge/third-party-podspecs"
 
-DEST="react-native-gutenberg-bridge/third-party-podspecs"
+# Generate the external (non-RN 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" -type f -name "*.podspec" -print)
 
-for podspec in $PODSPECS
+for podspec in $EXTERNAL_PODSPECS
 do
-    pod=`basename $podspec .podspec`
+    pod=$(basename "$podspec" .podspec)
+
     echo "Generating podspec for $pod"
-    INSTALL_YOGA_WITHOUT_PATH_OPTION=1 pod ipc spec $podspec > "$DEST/$pod.podspec.json"
-done
+    pod ipc spec $podspec > "$DEST/$pod.podspec.json"
+done
+
+# Generate the React Native podspecs
+# 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)
+TMP_DEST=$(mktemp -d)
+
+for podspec in $RN_PODSPECS
+do
+    pod=$(basename "$podspec" .podspec)
+    path=$(dirname "$podspec")
+
+    echo "Generating podspec for $pod with path $path"
+    pod ipc spec $podspec > "$TMP_DEST/$pod.podspec.json"
+    cat "$TMP_DEST/$pod.podspec.json" | jq > "$DEST/$pod.podspec.json"
+
+    # 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"
+done

ios/gutenberg.xcodeproj/project.pbxproj

@@ -8,7 +8,6 @@
 
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
-		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
 		00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };
 		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
 		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
@@ -64,13 +63,6 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTActionSheet;
 		};
-		00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTGeolocation;
-		};
 		00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -411,7 +403,6 @@
 /* Begin PBXFileReference section */
 		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
 		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
 		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
 		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
 		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
@@ -481,7 +472,6 @@
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
-				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
 				00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,
 				133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,
 				00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */,
@@ -533,14 +523,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		00C302B61ABCB90400DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 		00C302BC1ABCB91800DB3ED1 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -693,7 +675,6 @@
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
 				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
 				ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,
-				00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
 				00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
 				78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
 				00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,
@@ -938,6 +919,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 			);
@@ -957,10 +939,6 @@
 					ProductGroup = ADBDB9201DFEBF0600ED6528 /* Products */;
 					ProjectRef = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
 				},
-				{
-					ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
-					ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-				},
 				{
 					ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */;
 					ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -1036,13 +1014,6 @@
 			remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTGeolocation.a;
-			remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

package.json

@@ -130,7 +130,7 @@
     "jed": "^1.1.1",
     "jest-serializer-enzyme": "^1.0.0",
     "js-beautify": "^1.7.5",
-    "jsc-android": "236355.x.x",
+    "jsc-android": "^241213.1.0",
     "jsdom-jscore-rn": "git+https://github.com/iamcco/jsdom-jscore-rn.git#a562f3d57c27c13e5bfc8cf82d496e69a3ba2800",
     "jsx-to-string": "^1.3.1",
     "memize": "^1.0.5",
@@ -139,15 +139,15 @@
     "moment-timezone": "^0.5.16",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.12.0",
-    "react": "16.8.3",
-    "react-native": "0.59.3",
+    "react": "16.8.6",
+    "react-native": "jtreanor/react-native#v0.60.0-patched",
     "react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
     "react-native-keyboard-aware-scroll-view": "git+https://github.com/wordpress-mobile/react-native-keyboard-aware-scroll-view.git#gb-v0.8.7",
     "react-native-modal": "^6.5.0",
-    "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#v1.0.1",
+    "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#eadaa2f62d2f488d4dc80f9148e52b62047297ab",
     "react-native-safe-area": "^0.5.0",
-    "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#55244dc79ab876550599c82dca763c3eba0153c5",
-    "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#4dc15d1efcfafc4c55c1f073366235d506481a26",
+    "react-native-svg": "git+https://github.com/wordpress-mobile/react-native-svg.git#f16e9adae71c6cf3158f2356cf95fff5c2075e0f",
+    "react-native-video": "git+https://github.com/wordpress-mobile/react-native-video.git#3a0e2fa6fc6bf1fe1a54adb2dbf94545b28c2bc4",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
     "redux-multi": "^0.1.12",

react-native-aztec/.gitignore

@@ -32,7 +32,6 @@ local.properties
 
 # Gradle
 .gradle/
-gradle.properties
 
 # Generated by gradle
 crashlytics.properties