diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 810e23e4c1442..4c4d7914b1806 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/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={ {
diff --git a/packages/block-editor/src/components/offline-status/index.native.js b/packages/block-editor/src/components/offline-status/index.native.js
new file mode 100644
index 0000000000000..ae6007e75103c
--- /dev/null
+++ b/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;
diff --git a/packages/block-editor/src/components/offline-status/style.native.scss b/packages/block-editor/src/components/offline-status/style.native.scss
new file mode 100644
index 0000000000000..529693516653f
--- /dev/null
+++ b/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;
+}
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 36b2971423442..d743299d35a24 100644
--- a/packages/icons/src/index.js
+++ b/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';
diff --git a/packages/icons/src/library/offline.js b/packages/icons/src/library/offline.js
new file mode 100644
index 0000000000000..f0daa1aaeb79e
--- /dev/null
+++ b/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;
diff --git a/test/native/setup.js b/test/native/setup.js
index 3770a4ce3efc6..0f4c9f9eda20c 100644
--- a/test/native/setup.js
+++ b/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(),