Merge pull request #155 from wordpress-mobile/try/update_to_rn_57_take_2

Update React Native to version 0.57

babel.config.js

@@ -0,0 +1,32 @@
+module.exports = function( api ) {
+	api.cache( true );
+	return {
+		presets: [
+			'module:metro-react-native-babel-preset',
+		],
+		plugins: [
+			'react-require',
+			'@babel/plugin-transform-async-to-generator',
+			'@babel/plugin-proposal-async-generator-functions',
+			'@babel/plugin-transform-runtime',
+			'react-native-classname-to-style',
+			[
+				'react-native-platform-specific-extensions',
+				{
+					extensions: [
+						'css',
+						'scss',
+						'sass',
+					],
+				},
+			],
+		],
+		env: {
+			development: {
+				plugins: [
+					'@babel/transform-react-jsx-source',
+				],
+			},
+		},
+	};
+};

jest.config.js

@@ -13,7 +13,7 @@ if ( process.env.TEST_RN_PLATFORM ) {
 
 module.exports = {
 	verbose: true,
-	preset: 'jest-react-native',
+	preset: 'react-native',
 	testEnvironment: 'jsdom',
 	testPathIgnorePatterns: [
 		'/node_modules/',
@@ -29,7 +29,15 @@ module.exports = {
 	},
 	haste: {
 		defaultPlatform: rnPlatform,
-		platforms: [ 'android', 'ios', 'native' ],
-		providesModuleNodeModules: [ 'react-native', 'react-native-svg' ],
+		platforms: [
+			'android',
+			'ios',
+			'native',
+		],
+		hasteImplModulePath: '<rootDir>/node_modules/react-native/jest/hasteImpl.js',
+		providesModuleNodeModules: [
+			'react-native',
+			'react-native-svg',
+		],
 	},
 };

package.json

@@ -7,15 +7,18 @@
     "scssfiles": "src/*.scss src/**/*.scss"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-async-generator-functions": "^7.1.0",
+    "@babel/plugin-transform-async-to-generator": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.1.0",
     "@wordpress/babel-preset-default": "^1.1.2",
     "@wordpress/block-serialization-spec-parser": "^1.0.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.2",
+    "babel-jest": "^23.6.0",
     "babel-plugin-react-native-classname-to-style": "^1.2.1",
-    "babel-plugin-react-native-platform-specific-extensions": "^1.0.1",
+    "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
     "babel-plugin-react-require": "^3.0.0",
-    "babel-plugin-transform-async-generator-functions": "^6.24.1",
-    "babel-plugin-transform-async-to-generator": "^6.24.1",
-    "babel-preset-react-native-stage-0": "^1.0.1",
     "cross-env": "^5.1.4",
     "empty": "^0.10.1",
     "equivalent-key-map": "^0.2.0",
@@ -30,13 +33,14 @@
     "flow-bin": "0.67.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.3",
-    "jest-react-native": "^18.0.0",
+    "metro-react-native-babel-preset": "^0.45.5",
     "prettier": "git+https://github.com/Automattic/calypso-prettier.git#calypso-1.9",
     "prettier-eslint": "^8.8.2",
     "prettier-eslint-cli": "^4.7.1",
     "react-dom": "^16.2.0",
     "react-native-sass-transformer": "^1.1.1",
-    "react-test-renderer": "16.3.1",
+    "react-test-renderer": "16.5.0",
+    "regenerator-runtime": "^0.12.1",
     "remote-redux-devtools": "^0.5.12",
     "rungen": "^0.3.2",
     "sprintf-js": "^1.1.1"
@@ -58,7 +62,7 @@
     "flow": "flow",
     "prettier": "prettier-eslint --write $npm_package_config_jsfiles $npm_package_config_scssfiles",
     "clean": "yarn clean:aztec; yarn cache clean; yarn clean:haste; yarn clean:jest; yarn clean:metro; yarn clean:react; yarn clean:watchman; yarn clean:node;",
-    "clean:runtime": "yarn clean:haste; yarn clean:react; yarn clean:metro; yarn clean:jest; yarn clean:watchman",
+    "clean:runtime": "yarn clean:haste; yarn clean:react; yarn clean:metro; yarn clean:jest; yarn clean:watchman; yarn clean:babel-cache",
     "clean:aztec": "pushd react-native-aztec && (yarn clean; pushd example && (yarn clean; popd); popd)",
     "clean:haste": "rm -rf /tmp/haste-map-react-native-packager-*",
     "clean:install": "yarn clean; yarn",
@@ -67,12 +71,13 @@
     "clean:metro": "rm -rf $TMPDIR/metro-cache-*;",
     "clean:react": "rm -rf $TMPDIR/react-*",
     "clean:node": "rm -rf node_modules",
-    "clean:watchman": "watchman watch-del-all",
+	"clean:watchman": "watchman watch-del-all",
+	"clean:babel-cache": "rm -rf ./node_modules/.cache/babel-loader/*",
     "lint": "eslint . --ext .js",
     "lint:fix": "yarn lint --fix"
   },
   "dependencies": {
-    "babel-preset-es2015": "^6.24.1",
+    "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "dom-react": "^2.2.1",
     "domutils": "^1.7.0",
@@ -85,10 +90,10 @@
     "memize": "^1.0.5",
     "node-libs-react-native": "^1.0.2",
     "node-sass": "^4.8.3",
-    "react": "16.3.1",
-    "react-native": "0.55.4",
+    "react": "16.5.0",
+    "react-native": "0.57.1",
     "react-native-modal": "^6.5.0",
-    "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#bfccbaab6b5954e18f8b0ed441ba38275853b79c",
+    "react-native-recyclerview-list": "git+https://github.com/wordpress-mobile/react-native-recyclerview-list.git#c073c0335ebe0398c85648ffeb11cbed4ee79229",
     "react-native-svg": "^6.5.2",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",

rn-cli-inside-gb.config.js

@@ -1,6 +1,9 @@
 /** @format */
-const blacklist = require( 'metro' ).createBlacklist;
 const path = require( 'path' );
+const blacklist = require( 'metro-config/src/defaults/blacklist' );
+// Blacklist the nested GB filetree so modules are not resolved in duplicates,
+//  both in the nested directory and the parent directory.
+const blacklistElements = blacklist( [ new RegExp( path.basename( __dirname ) + '/gutenberg/.*' ) ] );
 
 const enm = require( './extra-node-modules.config.js' );
 
@@ -16,27 +19,17 @@ const mapper = function( accu, v ) {
 };
 
 const wppackages = wppackagenames.reduce( mapper, {} );
+const alternateRoots = [ path.resolve( __dirname, '../node_modules' ) ].concat( Object.values( wppackages ) );
 
 module.exports = {
 	extraNodeModules: Object.assign( enm, wppackages ),
-	getProjectRoots() {
-		const roots = [ __dirname, path.resolve( __dirname, '../node_modules' ) ].concat(
-			Object.values( wppackages )
-		);
-		return roots;
+	watchFolders: alternateRoots,
+	resolver: {
+		blacklistRE: blacklistElements,
+		sourceExts: [ 'js', 'json', 'scss', 'sass' ],
+		providesModuleNodeModules: [ 'react-native-svg', 'react-native' ],
 	},
-	getBlacklistRE: function() {
-		// Blacklist the nested GB filetree so modules are not resolved in duplicates,
-		//  both in the nested directory and the parent directory.
-		return blacklist( [ new RegExp( path.basename( __dirname ) + '/gutenberg/.*' ) ] );
-	},
-	getTransformModulePath() {
-		return require.resolve( './sass-transformer-inside-gb.js' );
-	},
-	getSourceExts() {
-		return [ 'js', 'json', 'scss', 'sass' ];
-	},
-	getProvidesModuleNodeModules() {
-		return [ 'react-native-svg', 'react-native' ];
+	transformer: {
+		babelTransformerPath: require.resolve( './sass-transformer-inside-gb.js' ),
 	},
 };

rn-cli.config.js

@@ -1,19 +1,18 @@
 /** @format */
-const blacklist = require( 'metro' ).createBlacklist;
 const path = require( 'path' );
+const blacklist = require( 'metro-config/src/defaults/blacklist' );
+// Blacklist the nested GB filetree so modules are not resolved in duplicates,
+//  both in the nested directory and the parent directory.
+const blacklistElements = blacklist( [ new RegExp( path.basename( __dirname ) + '/gutenberg/gutenberg-mobile/.*' ) ] );
 const enm = require( './extra-node-modules.config.js' );
 
 module.exports = {
 	extraNodeModules: enm,
-	getBlacklistRE: function() {
-		// There's a nested checkout of the mobile code inside the Gutenberg repo
-		//  as a submodule. Blacklist it to avoid errors due to duplicate modules.
-		return blacklist( [ new RegExp( path.basename( __dirname ) + '/gutenberg/gutenberg-mobile/.*/' ) ] );
+	resolver: {
+		blacklistRE: blacklistElements,
+		sourceExts: [ 'js', 'json', 'scss', 'sass' ],
 	},
-	getTransformModulePath() {
-		return require.resolve( './sass-transformer.js' );
-	},
-	getSourceExts() {
-		return [ 'js', 'json', 'scss', 'sass' ];
+	transformer: {
+		babelTransformerPath: require.resolve( './sass-transformer.js' ),
 	},
 };

sass-transformer-inside-gb.js

@@ -43,7 +43,9 @@ let upstreamTransformer = null;
 const reactNativeVersionString = require( 'react-native/package.json' ).version;
 const reactNativeMinorVersion = semver( reactNativeVersionString ).minor;
 
-if ( reactNativeMinorVersion >= 52 ) {
+if ( reactNativeMinorVersion >= 56 ) {
+	upstreamTransformer = require( 'metro/src/reactNativeTransformer' );
+} else if ( reactNativeMinorVersion >= 52 ) {
 	upstreamTransformer = require( 'metro/src/transformer' );
 } else if ( reactNativeMinorVersion >= 47 ) {
 	upstreamTransformer = require( 'metro-bundler/src/transformer' );

sass-transformer.js

@@ -43,7 +43,9 @@ let upstreamTransformer = null;
 const reactNativeVersionString = require( 'react-native/package.json' ).version;
 const reactNativeMinorVersion = semver( reactNativeVersionString ).minor;
 
-if ( reactNativeMinorVersion >= 52 ) {
+if ( reactNativeMinorVersion >= 56 ) {
+	upstreamTransformer = require( 'metro/src/reactNativeTransformer' );
+} else if ( reactNativeMinorVersion >= 52 ) {
 	upstreamTransformer = require( 'metro/src/transformer' );
 } else if ( reactNativeMinorVersion >= 47 ) {
 	upstreamTransformer = require( 'metro-bundler/src/transformer' );