[RNMobile][Monorepo] Make the native app customizable by a parent app

.github/workflows/rnmobile-android-runner.yml

@@ -7,26 +7,23 @@ jobs:
     strategy:
       matrix:
         native-test-name: [
-          gutenberg-editor-heading,
-          gutenberg-editor-image,
+          gutenberg-editor-gallery
         ]
 
     steps:
     - name: checkout
       uses: actions/checkout@v2
 
     - name: Restore npm cache
-      uses: actions/cache@v1
+      uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-npm-
 
     - run: npm ci
 
     - name: Restore Gradle cache
-      uses: actions/cache@v1
+      uses: actions/cache@v2
       with:
         path: ~/.gradle/caches
         key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle') }}

.github/workflows/rnmobile-ios-runner.yml

@@ -7,38 +7,31 @@ jobs:
     strategy:
       matrix:
         native-test-name: [
-          gutenberg-editor-heading,
-          gutenberg-editor-image,
+          gutenberg-editor-gallery
         ]
 
     steps:
     - uses: actions/checkout@v2
 
     - name: Restore npm cache
-      uses: actions/cache@v1
+      uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-npm-
 
-    - name: Install dependencies
-      run: |
-        source ~/.nvm/nvm.sh
-        nvm install
-        npm ci
+    - run: npm ci
 
     - name: Prepare build cache key
       run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt
 
     - name: Restore build cache
-      uses: actions/cache@v1
+      uses: actions/cache@v2
       with:
         path: packages/react-native-editor/ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app
         key: ${{ runner.os }}-ios-build-${{ hashFiles('ios-checksums.txt') }}
 
     - name: Restore pods cache
-      uses: actions/cache@v1
+      uses: actions/cache@v2
       with:
         path: |
           packages/react-native-editor/ios/Pods
@@ -55,6 +48,9 @@ jobs:
     - name: Bundle iOS
       run: npm run native test:e2e:bundle:ios
 
+    - name: Switch Xcode Version
+      run: sudo xcode-select --switch /Applications/Xcode_11.4.1.app
+
     - name: Build (if needed)
       run: test -e packages/react-native-editor/ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app/GutenbergDemo || SKIP_BUNDLING=true npm run native test:e2e:build-app:ios
 

packages/edit-post/src/editor.native.js

@@ -99,6 +99,7 @@ class Editor extends Component {
 			hiddenBlockTypes,
 			blockTypes,
 			post,
+			postId,
 			postType,
 			...props
 		} = this.props;
@@ -112,9 +113,9 @@ class Editor extends Component {
 		);
 
 		const normalizedPost = post || {
-			id: 1,
+			id: postId,
 			title: {
-				raw: props.initialTitle,
+				raw: props.initialTitle || '',
 			},
 			content: {
 				// make sure the post content is in sync with gutenberg store

packages/edit-post/src/index.native.js

@@ -3,30 +3,36 @@
  */
 import '@wordpress/core-data';
 import '@wordpress/block-editor';
-import '@wordpress/editor';
 import '@wordpress/viewport';
 import '@wordpress/notices';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import '@wordpress/format-library';
+import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './store';
+import Editor from './editor';
 
 let blocksRegistered = false;
 
 /**
- * Initializes the Editor.
+ * Initializes the Editor and returns a componentProvider
+ * that can be registered with `AppRegistry.registerComponent`
+ *
+ * @param {string}  id           Unique identifier for editor instance.
+ * @param {Object}  postType     Post type of the post to edit.
+ * @param {Object}  postId       ID of the post to edit (unused right now)
  */
-export function initializeEditor() {
+export function initializeEditor( id, postType, postId ) {
 	if ( blocksRegistered ) {
 		return;
 	}
 
 	// register and setup blocks
 	registerCoreBlocks();
 	blocksRegistered = true;
-}
 
-export { default as Editor } from './editor';
+	render( <Editor postId={ postId } postType={ postType } />, id );
+}

packages/edit-post/src/test/editor.native.js

@@ -57,6 +57,7 @@ const renderEditorWith = ( content ) => {
 			initialHtmlModeEnabled={ false }
 			initialTitle={ '' }
 			postType="post"
+			postId="1"
 		/>
 	);
 };

packages/element/src/react-platform.native.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { AppRegistry } from 'react-native';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters, doAction } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { cloneElement } from './react';
+
+const render = ( element, id ) =>
+	AppRegistry.registerComponent( id, () => ( propsFromParent ) => {
+		const parentProps = omit( propsFromParent || {}, [ 'rootTag' ] );
+
+		doAction( 'native.pre-render', parentProps );
+
+		const filteredProps = applyFilters(
+			'native.block_editor_props',
+			parentProps
+		);
+
+		doAction( 'native.render', filteredProps );
+
+		return cloneElement( element, filteredProps );
+	} );
+
+/**
+ * Render a given element on Native.
+ * This actually returns a componentProvider that can be registered with `AppRegistry.registerComponent`
+ *
+ * @param {WPElement}   element Element to render.
+ */
+export { render };

packages/react-native-bridge/.gitignore

@@ -8,7 +8,7 @@
 node_modules/
 npm-debug.log
 yarn-error.log
-  
+
 
 # Xcode
 #
@@ -29,7 +29,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
-      
+
 
 # Android/IntelliJ
 #
@@ -38,9 +38,9 @@ build/
 .gradle
 local.properties
 *.iml
+android/src/main/assets/
 
 # BUCK
 buck-out/
 \.buckd/
 *.keystore
-