From b1e6865b22eae1e11c17200a36b3271672b55f68 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 9 Sep 2021 10:05:11 +0200 Subject: [PATCH] [RNMobile] [Embed block] Fix content disappearing on Android when switching 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 | 12 +++++++++--- packages/react-native-editor/CHANGELOG.md | 2 ++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js index cde05eeca8fcb6..0cc52f1b880507 100644 --- a/packages/components/src/sandbox/index.native.js +++ b/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, } ); diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 80ff9080ab94af..519b20f7c3fefd 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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]