WordPress · gziolo · Aug 9, 2019 · Aug 9, 2019
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -118,9 +118,16 @@ module.exports = {
 			files: [ 'packages/**/*.js' ],
 			rules: {
 				'import/no-extraneous-dependencies': 'error',
+				'no-restricted-imports': [ 'error', {
+					paths: [
+						{
+							name: 'react',
+							message: 'Please use @wordpress/element instead.',
+						},
+					],
+				} ],
 			},
 			excludedFiles: [
-				'**/*.@(android|ios|native).js',
 				'**/benchmark/**/*.js',
 				'**/@(__mocks__|__tests__|test)/**/*.js',
 				'**/@(storybook|stories)/**/*.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -49,6 +49,7 @@
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"react-autosize-textarea": "^3.0.2",
+		"react-native": "0.60.0",
 		"react-spring": "^8.0.19",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",

diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
@@ -4,12 +4,12 @@
 import { BottomSheet } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { InspectorControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
+import InspectorControls from '../inspector-controls';
 
 function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, ...props } ) {
 	return (

diff --git a/packages/block-editor/src/components/caption/index.native.js b/packages/block-editor/src/components/caption/index.native.js
@@ -6,11 +6,15 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import RichText from '../rich-text';
+
 const Caption = ( { accessible, accessibilityLabel, onBlur, onChange, onFocus, isSelected, shouldDisplay, text } ) => (
 	<View style={ {	padding: 12, flex: 1, display: shouldDisplay ? 'flex' : 'none' } }
 		accessible={ accessible }

diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -7,7 +7,6 @@ import { TouchableWithoutFeedback, View } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -17,6 +16,7 @@ import { getDefaultBlockName } from '@wordpress/blocks';
  * Internal dependencies
  */
 import styles from './style.scss';
+import RichText from '../rich-text';
 
 export function DefaultBlockAppender( {
 	isLocked,

diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js
@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * WordPress dependencies
  */
 import { createSlotFill } from '@wordpress/components';
+import { Children } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,7 +16,7 @@ const FillWithSettingsButton = ( { children, ...props } ) => {
 	return (
 		<>
 			<Fill { ...props }>{ children }</Fill>
-			{ React.Children.count( children ) > 0 && ( <BlockSettingsButton /> ) }
+			{ Children.count( children ) > 0 && ( <BlockSettingsButton /> ) }
 		</>
 	);
 };

diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -7,18 +7,17 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MediaUpload,
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-} from '@wordpress/block-editor';
 import { Dashicon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import MediaUpload, {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+} from '../media-upload';
 
 function MediaPlaceholder( props ) {
 	const {

diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
 import {
 	subscribeMediaUpload,
@@ -13,6 +12,7 @@ import {
 import {
 	Spinner,
 } from '@wordpress/components';
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -26,7 +26,7 @@ export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
 export const MEDIA_UPLOAD_STATE_FAILED = 3;
 export const MEDIA_UPLOAD_STATE_RESET = 4;
 
-export class MediaUploadProgress extends React.Component {
+export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 

diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import {
 	requestMediaPickFromMediaLibrary,
 	requestMediaPickFromDeviceLibrary,
@@ -11,6 +10,7 @@ import {
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Picker } from '@wordpress/components';
 
@@ -25,7 +25,7 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 
-export class MediaUpload extends React.Component {
+export class MediaUpload extends Component {
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );

diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -37,6 +37,7 @@
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
@@ -49,6 +50,7 @@
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"moment": "^2.22.1",
+		"react-native": "0.60.0",
 		"tinycolor2": "^1.4.1",
 		"url": "^0.11.0"
 	},

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View, ImageBackground, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
 import {
 	requestMediaImport,
@@ -14,6 +13,7 @@ import { isEmpty, map } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { Component } from '@wordpress/element';
 import {
 	TextControl,
 	ToggleControl,
@@ -24,7 +24,6 @@ import {
 	PanelBody,
 	PanelActions,
 } from '@wordpress/components';
-
 import {
 	Caption,
 	MediaPlaceholder,
@@ -68,7 +67,7 @@ const sizeOptions = map( sizeOptionLabels, ( label, option ) => ( { value: optio
 // Default Image ratio 4:3
 const IMAGE_ASPECT_RATIO = 4 / 3;
 
-export class ImageEdit extends React.Component {
+export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
 

diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -8,7 +8,6 @@ import { View, Text } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -17,6 +16,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { coreBlocks } from '../';
 
 export class UnsupportedBlockEdit extends Component {
 	render() {

diff --git a/packages/block-library/src/missing/index.native.js b/packages/block-library/src/missing/index.native.js
@@ -1,12 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { coreBlocks } from '@wordpress/block-library';
-
 /**
  * Internal dependencies
  */
 import { settings as webSettings } from './index.js';
+import { coreBlocks } from '../';
 
 export { metadata, name } from './index.js';
 

diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
@@ -1,11 +1,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View, TouchableWithoutFeedback, Text } from 'react-native';
-/**
- * Internal dependencies
- */
 import {
 	mediaUploadSync,
 	requestImageFailedRetryDialog,
@@ -31,6 +27,7 @@ import {
 	VIDEO_ASPECT_RATIO,
 	VideoPlayer,
 } from '@wordpress/block-editor';
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
@@ -42,7 +39,7 @@ import style from './style.scss';
 import SvgIcon from './icon';
 import SvgIconRetry from './icon-retry';
 
-class VideoEdit extends React.Component {
+class VideoEdit extends Component {
 	constructor( props ) {
 		super( props );
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -41,6 +41,7 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
+		"react-native": "0.60.0",
 		"react-spring": "^8.0.20",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",

diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -7,7 +7,6 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Dashicon } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
@@ -17,6 +16,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
+import Dashicon from '../../dashicon';
 
 class BottomSheetCell extends Component {
 	constructor( props ) {

diff --git a/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js b/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js
@@ -2,7 +2,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import {
 	Keyboard,
 	LayoutAnimation,
@@ -12,14 +11,19 @@ import {
 	Dimensions,
 } from 'react-native';
 
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
 /**
  * This is a simplified version of Facebook's KeyboardAvoidingView.
  * It's meant to work specifically with BottomSheets.
  * This fixes an issue in the bottom padding calculation, when the
  * BottomSheet was presented on Landscape, with the keyboard already present,
  * and a TextField on Autofocus (situation present on Links UI)
  */
-class KeyboardAvoidingView extends React.Component {
+class KeyboardAvoidingView extends Component {
 	constructor() {
 		super( ...arguments );
 

diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { View } from 'react-native';
 
 /**

diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js
@@ -3,17 +3,11 @@
  */
 import { View } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import {
-	TextControl,
-} from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
 import styles from './actions.scss';
+import TextControl from '../text-control';
 
 function PanelActions( { actions } ) {
 	return (

diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -45,6 +45,7 @@
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
+		"react-native": "0.60.0",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0"
 	},

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { useRef } from 'react';
 import { ScrollView, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 import { withViewportMatch } from '@wordpress/viewport';
 import { __ } from '@wordpress/i18n';
 import {

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -53,6 +53,7 @@
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",
 		"react-autosize-textarea": "^3.0.2",
+		"react-native": "0.60.0",
 		"redux-optimist": "^1.0.0",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0"