[RNMobile] [Embed block] Fix content disappearing on Android when swi…

…tching light/dark mode (#34207)

* Add dark/light mode value in sandbox key for Android

* Use usePreferredColorScheme hook

* Fetch color scheme in sandbox component directly

* Update react-native-editor changelog

Additionally I added a a missing entry related to the WP embed component implementation.

packages/components/src/sandbox/index.native.js

@@ -14,6 +14,7 @@ import {
 	useState,
 	useEffect,
 } from '@wordpress/element';
+import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -162,6 +163,7 @@ function Sandbox( {
 	type,
 	url,
 } ) {
+	const colorScheme = usePreferredColorScheme();
 	const ref = useRef();
 	const [ height, setHeight ] = useState( 0 );
 	const [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );
@@ -171,10 +173,14 @@ function Sandbox( {
 		windowSize.width >= windowSize.height
 	);
 	const wasLandscape = useRef( isLandscape );
-	// On Android, we need to recreate the WebView when the device rotates, otherwise it disappears.
-	// For this purpose, the key value used in the WebView will change when the device orientation gets updated.
+	// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:
+	// - Device rotation
+	// - Light/dark mode changes
+	// For this purpose, the key prop used in the WebView will be updated with the value of the actions.
 	const key = Platform.select( {
-		android: `${ url }-${ isLandscape ? 'landscape' : 'portrait' }`,
+		android: `${ url }-${
+			isLandscape ? 'landscape' : 'portrait'
+		}-${ colorScheme }`,
 		ios: url,
 	} );
 

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,8 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [**] [Embed block] Implement WP embed preview component [#34004]
+-   [*] [Embed block] Fix content disappearing on Android when switching light/dark mode [#34207]
 
 ## 1.61.0
 -   [**] Enable embed preview for a list of providers (for now only YouTube and Twitter) [#34446]