Add @react-native-community/netinfo library

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

@@ -6,55 +6,42 @@ import { Keyboard } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import HeaderToolbar from './header-toolbar';
 
-export default class Header extends Component {
-	constructor() {
-		super( ...arguments );
+const Header = () => {
+	const [ isKeyboardVisible, setKeyboardVisible ] = useState( false );
 
-		this.keyboardDidShow = this.keyboardDidShow.bind( this );
-		this.keyboardDidHide = this.keyboardDidHide.bind( this );
+	const keyboardDidShow = () => {
+		setKeyboardVisible( true );
+	};
 
-		this.state = {
-			isKeyboardVisible: false,
-		};
-	}
+	const keyboardDidHide = () => {
+		setKeyboardVisible( false );
+	};
 
-	componentDidMount() {
-		this.keyboardShowSubscription = Keyboard.addListener(
+	useEffect( () => {
+		const keyboardShowSubscription = Keyboard.addListener(
 			'keyboardDidShow',
-			this.keyboardDidShow
+			keyboardDidShow
 		);
-		this.keyboardHideSubscription = Keyboard.addListener(
+		const keyboardHideSubscription = Keyboard.addListener(
 			'keyboardDidHide',
-			this.keyboardDidHide
-		);
-	}
-
-	componentWillUnmount() {
-		this.keyboardShowSubscription.remove();
-		this.keyboardHideSubscription.remove();
-	}
-
-	keyboardDidShow() {
-		this.setState( { isKeyboardVisible: true } );
-	}
-
-	keyboardDidHide() {
-		this.setState( { isKeyboardVisible: false } );
-	}
-
-	render() {
-		return (
-			<HeaderToolbar
-				showKeyboardHideButton={ this.state.isKeyboardVisible }
-			/>
+			keyboardDidHide
 		);
-	}
-}
+
+		return () => {
+			keyboardShowSubscription.remove();
+			keyboardHideSubscription.remove();
+		};
+	}, [] );
+
+	return <HeaderToolbar showKeyboardHideButton={ isKeyboardVisible } />;
+};
+
+export default Header;

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

@@ -33,6 +33,7 @@ import headerToolbarStyles from '../header/header-toolbar/style.scss';
 import Header from '../header';
 import VisualEditor from '../visual-editor';
 import { store as editPostStore } from '../../store';
+import OfflineStatus from './offline-status';
 
 class Layout extends Component {
 	constructor() {
@@ -179,6 +180,7 @@ class Layout extends Component {
 						</KeyboardAvoidingView>
 					) }
 					{ Platform.OS === 'android' && <AutocompletionItemsSlot /> }
+					<OfflineStatus />
 				</SafeAreaView>
 			</Tooltip.Slot>
 		);

packages/edit-post/src/components/layout/offline-status.native.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import React, { Text, View, StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useNetInfo } from '@react-native-community/netinfo';
+
+const OfflineStatus = () => {
+	const { isConnected } = useNetInfo();
+
+	return (
+		<View style={ [ styles.container ] }>
+			<Text style={ styles.text }>
+				{ isConnected ? "You're online" : "You're offline" }
+			</Text>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create( {
+	container: {
+		position: 'absolute',
+		top: 15,
+		right: 15,
+		zIndex: 999,
+		backgroundColor: 'black',
+		borderRadius: 20,
+		padding: 10,
+	},
+	text: {
+		color: 'white',
+	},
+} );
+
+export default OfflineStatus;

packages/react-native-editor/ios/Podfile.lock

@@ -22,15 +22,18 @@ PODS:
     - hermes-engine/Pre-built (= 0.71.11)
   - hermes-engine/Pre-built (0.71.11)
   - libevent (2.1.12)
-  - libwebp (1.2.3):
-    - libwebp/demux (= 1.2.3)
-    - libwebp/mux (= 1.2.3)
-    - libwebp/webp (= 1.2.3)
-  - libwebp/demux (1.2.3):
+  - libwebp (1.3.2):
+    - libwebp/demux (= 1.3.2)
+    - libwebp/mux (= 1.3.2)
+    - libwebp/sharpyuv (= 1.3.2)
+    - libwebp/webp (= 1.3.2)
+  - libwebp/demux (1.3.2):
     - libwebp/webp
-  - libwebp/mux (1.2.3):
+  - libwebp/mux (1.3.2):
     - libwebp/demux
-  - libwebp/webp (1.2.3)
+  - libwebp/sharpyuv (1.3.2)
+  - libwebp/webp (1.3.2):
+    - libwebp/sharpyuv
   - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
@@ -286,6 +289,8 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.4.0):
     - React-Core
+  - react-native-netinfo (11.1.0):
+    - React-Core
   - react-native-safe-area (0.5.1):
     - React-Core
   - react-native-safe-area-context (4.6.3):
@@ -468,6 +473,7 @@ DEPENDENCIES:
   - React-logger (from `../../../node_modules/react-native/ReactCommon/logger`)
   - "react-native-blur (from `../../../node_modules/@react-native-community/blur`)"
   - react-native-get-random-values (from `../../../node_modules/react-native-get-random-values`)
+  - "react-native-netinfo (from `../../../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area (from `../../../node_modules/react-native-safe-area`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../../../node_modules/@react-native-community/slider`)"
@@ -554,6 +560,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@react-native-community/blur"
   react-native-get-random-values:
     :path: "../../../node_modules/react-native-get-random-values"
+  react-native-netinfo:
+    :path: "../../../node_modules/@react-native-community/netinfo"
   react-native-safe-area:
     :path: "../../../node_modules/react-native-safe-area"
   react-native-safe-area-context:
@@ -620,7 +628,7 @@ SPEC CHECKSUMS:
   Gutenberg: c765216d64630eb86d053ff53214abaedbd5f535
   hermes-engine: 34c863b446d0135b85a6536fa5fd89f48196f848
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
+  libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: f6187ec763637e6a57f5728dd9a3bdabc6d6b4e0
   RCTTypeSafety: a01aca2dd3b27fa422d5239252ad38e54e958750
@@ -637,6 +645,7 @@ SPEC CHECKSUMS:
   React-logger: 186dd536128ae5924bc38ed70932c00aa740cd5b
   react-native-blur: 3e9c8e8e9f7d17fa1b94e1a0ae9fd816675f5382
   react-native-get-random-values: b6fb85e7169b9822976793e467458c151c3e8b69
+  react-native-netinfo: 3aa5637c18834966e0c932de8ae1ae56fea20a97
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
   react-native-safe-area-context: 36cc67648134e89465663b8172336a19eeda493d
   react-native-slider: dff0d8a46f368a8d1bacd8638570d75b9b0be400

packages/react-native-editor/package.json

@@ -32,6 +32,7 @@
 		"@babel/runtime": "^7.20.0",
 		"@react-native-clipboard/clipboard": "1.11.2",
 		"@react-native-community/blur": "4.2.0",
+		"@react-native-community/netinfo": "^11.1.0",
 		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-4/react-native-community-slider-3.0.2-wp-4.tgz",
 		"@react-native-masked-view/masked-view": "0.2.9",
 		"@react-native/gradle-plugin": "0.72.11",