[RNMobile] Add OfflineStatus component

packages/block-editor/src/components/block-list/index.native.js

@@ -30,6 +30,7 @@ import {
 import { BlockDraggableWrapper } from '../block-draggable';
 import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 import { store as blockEditorStore } from '../../store';
+import OfflineStatus from '../offline-status';
 
 const identity = ( x ) => x;
 
@@ -235,6 +236,10 @@ export default function BlockList( {
 			onLayout={ onLayout }
 			testID="block-list-wrapper"
 		>
+			{
+				// eslint-disable-next-line no-undef
+				__DEV__ && <OfflineStatus />
+			}
 			{ isRootList ? (
 				<BlockListProvider
 					value={ {

packages/block-editor/src/components/offline-status/index.native.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { Icon } from '@wordpress/components';
+import { offline as offlineIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useIsConnected } from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+const OfflineStatus = () => {
+	const { isConnected } = useIsConnected();
+
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles.offline,
+		styles.offline__dark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--text' ],
+		styles[ 'offline--text__dark' ]
+	);
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--icon' ],
+		styles[ 'offline--icon__dark' ]
+	);
+
+	return ! isConnected ? (
+		<View style={ containerStyle }>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
+		</View>
+	) : null;
+};
+
+export default OfflineStatus;

packages/block-editor/src/components/offline-status/style.native.scss

@@ -0,0 +1,28 @@
+.offline {
+	background-color: $gray-lighten-30;
+	padding: $grid-unit;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+
+.offline__dark {
+	background-color: $gray-70;
+}
+
+.offline--text {
+	color: $black;
+	padding-left: 3;
+}
+
+.offline--text__dark {
+	color: $white;
+}
+
+.offline--icon {
+	fill: $gray-70;
+}
+
+.offline--icon__dark {
+	fill: $gray-10;
+}

packages/icons/src/index.js

@@ -190,6 +190,7 @@ export { default as postList } from './library/post-list';
 export { default as postTerms } from './library/post-terms';
 export { default as previous } from './library/previous';
 export { default as next } from './library/next';
+export { default as offline } from './library/offline';
 export { default as preformatted } from './library/preformatted';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';

packages/icons/src/library/offline.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const offline = (
+	<SVG
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M1.36605 2.81332L2.30144 1.87332L13.5592 13.1867L12.6239 14.1267L7.92702 9.40666C6.74618 9.41999 5.57861 9.87999 4.68302 10.78L3.35623 9.44665C4.19874 8.60665 5.2071 8.03999 6.2818 7.75332L4.7958 6.25999C3.78744 6.67332 2.84542 7.29332 2.02944 8.11332L0.702656 6.77999C1.512 5.97332 2.42085 5.33332 3.3894 4.84665L1.36605 2.81332ZM15.2973 6.77999L13.9705 8.11332C12.3054 6.43999 10.1096 5.61332 7.92039 5.62666L6.20883 3.90665C9.41303 3.34665 12.8229 4.29332 15.2973 6.77999ZM10.1759 7.89332C11.0781 8.21332 11.9273 8.72665 12.6438 9.44665L12.1794 9.90665L10.1759 7.89332ZM6.00981 12.1133L8 14.1133L9.99018 12.1133C8.89558 11.0067 7.11105 11.0067 6.00981 12.1133Z"
+		/>
+	</SVG>
+);
+
+export default offline;

test/native/setup.js

@@ -107,6 +107,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeShowEditorHelp: jest.fn(),
 		subscribeOnUndoPressed: jest.fn(),
 		subscribeOnRedoPressed: jest.fn(),
+		useIsConnected: jest.fn( () => ( { isConnected: true } ) ),
 		editorDidMount: jest.fn(),
 		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),