[RNMobile] Update Image component to avoid flicker when updating the URI

packages/components/src/mobile/image/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image as RNImage, Text, View } from 'react-native';
+import { Animated, Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, Platform } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,6 +54,9 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ localURL, setLocalURL ] = useState( null );
+	const [ networkURL, setNetworkURL ] = useState( null );
+	const [ networkImageLoaded, setNetworkImageLoaded ] = useState( false );
 
 	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
 	const Image =
@@ -80,6 +83,22 @@ const ImageComponent = ( {
 					onImageDataLoad( metaData );
 				}
 			} );
+
+			if ( url.startsWith( 'file:///' ) ) {
+				setLocalURL( url );
+			} else if ( url.startsWith( 'https://' ) ) {
+				if ( Platform.isIOS ) {
+					setNetworkURL( url );
+				} else if ( Platform.isAndroid ) {
+					const result = RNImage.prefetch( url );
+					if ( result ) {
+						RNImage.prefetch( url ).then( () => {
+							setNetworkURL( url );
+							setNetworkImageLoaded( true );
+						} );
+					}
+				}
+			}
 		}
 		return () => ( isCurrent = false );
 		// Disable reason: deferring this refactor to the native team.
@@ -188,9 +207,19 @@ const ImageComponent = ( {
 		focalPoint && styles.focalPointContainer,
 	];
 
+	const opacityValue = useRef( new Animated.Value( 1 ) ).current;
+
+	useEffect( () => {
+		Animated.timing( opacityValue, {
+			toValue: isUploadInProgress ? 0.3 : 1,
+			duration: 100,
+			useNativeDriver: true,
+		} ).start();
+	}, [ isUploadInProgress, opacityValue ] );
+
 	const imageStyles = [
 		{
-			opacity: isUploadInProgress ? 0.3 : 1,
+			opacity: opacityValue,
 			height: containerSize?.height,
 		},
 		! resizeMode && {
@@ -214,6 +243,7 @@ const ImageComponent = ( {
 		imageHeight && { height: imageHeight },
 		shapeStyle,
 	];
+
 	const imageSelectedStyles = [
 		usePreferredColorSchemeStyle(
 			styles.imageBorder,
@@ -259,14 +289,57 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<Image
-							style={ imageStyles }
-							source={ { uri: url } }
-							{ ...( ! focalPoint && {
-								resizeMethod: 'scale',
-							} ) }
-							resizeMode={ imageResizeMode }
-						/>
+						{ Platform.isAndroid && (
+							<>
+								{ networkImageLoaded && networkURL && (
+									<Animated.Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: networkURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+									/>
+								) }
+								{ ! networkImageLoaded && ! networkURL && (
+									<Animated.Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: localURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+									/>
+								) }
+							</>
+						) }
+						{ Platform.isIOS && (
+							<>
+								<Animated.Image
+									style={ imageStyles }
+									source={ {
+										uri:
+											networkURL && networkImageLoaded
+												? networkURL
+												: ( localURL && localURL ) ||
+												  url,
+									} }
+									{ ...( ! focalPoint && {
+										resizeMethod: 'scale',
+									} ) }
+									resizeMode={ imageResizeMode }
+								/>
+								<Image
+									source={ { uri: networkURL } }
+									style={ styles.nonVisibleImage }
+									onLoad={ () => {
+										setNetworkImageLoaded( true );
+									} }
+								/>
+							</>
+						) }
 					</View>
 				) }
 

packages/components/src/mobile/image/style.native.scss

@@ -171,3 +171,9 @@
 .wide {
 	width: 100%;
 }
+
+.nonVisibleImage {
+	height: 0;
+	width: 0;
+	opacity: 0;
+}

packages/react-native-editor/CHANGELOG.md

@@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Image block media uploads display a custom error message when there is no internet connection [#56937]
 -   [*] Fix missing custom color indicator for custom gradients [#57605]
 -   [**] Display a notice when a network connection unavailable [#56934]
+-   [**] Prevent images from temporarily disappearing when uploading media [#57869]
 
 ## 1.110.0
 -   [*] [internal] Move InserterButton from components package to block-editor package [#56494]