iOS: Fixes #8557: Fix white flash when editing notes in dark mode (#9987)

packages/app-mobile/components/ExtendedWebView.tsx

@@ -9,8 +9,6 @@ import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { WebViewErrorEvent, WebViewEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes';
 
 import Setting from '@joplin/lib/models/Setting';
-import { themeStyle } from '@joplin/lib/theme';
-import { Theme } from '@joplin/lib/themes/type';
 import shim from '@joplin/lib/shim';
 import { StyleProp, ViewStyle } from 'react-native';
 
@@ -34,8 +32,6 @@ type OnLoadEndCallback = (event: WebViewEvent)=> void;
 type OnFileUpdateCallback = (event: SourceFileUpdateEvent)=> void;
 
 interface Props {
-	themeId: number;
-
 	// A name to be associated with the WebView (e.g. NoteEditor)
 	// This name should be unique.
 	webviewInstanceId: string;
@@ -67,7 +63,6 @@ interface Props {
 }
 
 const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
-	const theme: Theme = themeStyle(props.themeId);
 	const webviewRef = useRef(null);
 	const [source, setSource] = useState<WebViewSource|undefined>(undefined);
 
@@ -135,7 +130,10 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	return (
 		<WebView
 			style={{
-				backgroundColor: theme.backgroundColor,
+				// `backgroundColor: transparent` prevents a white fhash on iOS.
+				// It seems that `backgroundColor: theme.backgroundColor` does not
+				// prevent the flash.
+				backgroundColor: 'transparent',
 				...(props.style as any),
 			}}
 			ref={webviewRef}

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx

@@ -28,10 +28,6 @@ interface Props {
 	onLoadEnd?: ()=> void;
 }
 
-const webViewStyle = {
-	backgroundColor: 'transparent',
-};
-
 export default function NoteBodyViewer(props: Props) {
 	const dialogBoxRef = useRef(null);
 	const webviewRef = useRef<WebViewControl>(null);
@@ -103,8 +99,6 @@ export default function NoteBodyViewer(props: Props) {
 			<ExtendedWebView
 				ref={webviewRef}
 				webviewInstanceId='NoteBodyViewer'
-				themeId={props.themeId}
-				style={webViewStyle}
 				html={html}
 				injectedJavaScript={injectedJs.join('\n')}
 				mixedContentMode="always"

packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx

@@ -314,7 +314,6 @@ const ImageEditor = (props: Props) => {
 
 	return (
 		<ExtendedWebView
-			themeId={props.themeId}
 			html={html}
 			injectedJavaScript={injectedJavaScript}
 			allowFileAccessFromJs={true}

packages/app-mobile/components/NoteEditor/NoteEditor.tsx

@@ -488,7 +488,6 @@ function NoteEditor(props: Props, ref: any) {
 			}}>
 				<ExtendedWebView
 					webviewInstanceId='NoteEditor'
-					themeId={props.themeId}
 					scrollEnabled={true}
 					ref={webviewRef}
 					html={html}