Register component directly in render for more flexibility

WordPress · Apr 2, 2020 · 76866b5 · 76866b5
1 parent c7f28a0
commit 76866b5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/packages/edit-post/src/index.native.js b/packages/edit-post/src/index.native.js
@@ -22,6 +22,7 @@ let blocksRegistered = false;
  * that can be registered with `AppRegistry.registerComponent`
  */
 export function initializeEditor( {
+	id,
 	initialHtml,
 	initialTitle,
 	initialHtmlModeEnabled,
@@ -35,12 +36,13 @@ export function initializeEditor( {
 	registerCoreBlocks();
 	blocksRegistered = true;
 
-	return render(
+	render(
 		<Editor
 			initialHtml={ initialHtml }
 			initialHtmlModeEnabled={ initialHtmlModeEnabled }
 			initialTitle={ initialTitle }
 			postType={ postType }
-		/>
+		/>,
+		id
 	);
 }
diff --git a/packages/element/src/react-platform.native.js b/packages/element/src/react-platform.native.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { AppRegistry } from "react-native";
 import { isEmpty, omit } from 'lodash';
 
 /**
@@ -13,23 +14,25 @@ import { applyFilters, doAction } from '@wordpress/hooks';
  */
 import { cloneElement } from './react';
 
-const render = ( element ) => ( propsFromNative ) => {
-	doAction( 'native.render', propsFromNative );
+const render = ( element, id ) => AppRegistry.registerComponent( id, () => ( propsFromNative ) => {
+	const nativeProps = omit( propsFromNative || {}, [ 'rootTag' ] );
+
+	doAction( 'native.render', nativeProps );
 
 	// if we have not received props from a parent native app
 	// just render the element as it is
-	if ( isEmpty( omit( propsFromNative, [ 'rootTag' ] ) ) ) {
+	if ( isEmpty( nativeProps ) ) {
 		return element;
 	}
 
 	// Otherwise overwrite the existing props using a filter hook
 	const filteredProps = applyFilters(
 		'native.block_editor_props',
-		propsFromNative
+		nativeProps
 	);
 
 	return cloneElement( element, filteredProps );
-};
+} );
 
 /**
  * Render a given element on Native.

diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AppRegistry, I18nManager } from 'react-native';
+import { I18nManager } from 'react-native';
 
 /**
  * Internal dependencies
@@ -36,7 +36,8 @@ const gutenbergSetup = () => {
 	setupInitHooks();
 
 	const initializeEditor = require( '@wordpress/edit-post' ).initializeEditor;
-	return initializeEditor( {
+	initializeEditor( {
+		id: 'gutenberg',
 		initialHtml,
 		initialHtmlModeEnabled: false,
 		initialTitle: 'Welcome to Gutenberg!',
@@ -89,4 +90,4 @@ const setupLocale = ( locale, extraTranslations ) => {
 
 reactNativeSetup();
 
-AppRegistry.registerComponent( 'gutenberg', gutenbergSetup );
+gutenbergSetup();