From 5e43b3e3c4e4c0b1b26108ced156c128452b2750 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Tue, 16 Jan 2024 17:06:02 +1000 Subject: [PATCH 01/18] Update native image component to avoid flicker when updating the URI --- .../src/mobile/image/index.native.js | 42 ++++++++++++++++--- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 09b21014a04b09..27a17aca175dd7 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/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,12 @@ const ImageComponent = ( { onImageDataLoad( metaData ); } } ); + + if ( url.startsWith( 'file:///' ) ) { + return setLocalURL( url ); + } else if ( url.startsWith( 'https://' ) ) { + return setNetworkURL( url ); + } } return () => ( isCurrent = false ); // Disable reason: deferring this refactor to the native team. @@ -188,9 +197,19 @@ const ImageComponent = ( { focalPoint && styles.focalPointContainer, ]; + const opacityValue = useRef( new Animated.Value( 0.3 ) ).current; + + useEffect( () => { + Animated.timing( opacityValue, { + toValue: isUploadInProgress ? 0.3 : 1, + duration: 200, + useNativeDriver: true, + } ).start(); + }, [ isUploadInProgress, opacityValue ] ); + const imageStyles = [ { - opacity: isUploadInProgress ? 0.3 : 1, + opacity: opacityValue, height: containerSize?.height, }, ! resizeMode && { @@ -259,14 +278,27 @@ const ImageComponent = ( { ) : ( - + { + setNetworkImageLoaded( true ); + } } + /> ) } From 9d0797a502605e7bd9b08edbc1a076a1dfa6e099 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 17 Jan 2024 11:31:29 +1000 Subject: [PATCH 02/18] Update non-visible Image block styles --- packages/components/src/mobile/image/index.native.js | 6 +++--- packages/components/src/mobile/image/style.native.scss | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 27a17aca175dd7..da7533dcec6a03 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -280,12 +280,12 @@ const ImageComponent = ( { { setNetworkImageLoaded( true ); } } diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss index 040a8e507667e8..cebc097de8cdc5 100644 --- a/packages/components/src/mobile/image/style.native.scss +++ b/packages/components/src/mobile/image/style.native.scss @@ -171,3 +171,9 @@ .wide { width: 100%; } + +.nonVisibleImage { + height: 1; + width: 1; + opacity: 0; +} From af417cfcac600d3c4ab89137d5dca9534dd44d96 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 17 Jan 2024 18:49:34 +1000 Subject: [PATCH 03/18] Update mobile Image block to use separate network and local image URL behavior between platforms --- .../src/mobile/image/index.native.js | 105 +++++++++++++----- 1 file changed, 80 insertions(+), 25 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index da7533dcec6a03..eced6092c2c510 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -84,10 +84,26 @@ const ImageComponent = ( { } } ); - if ( url.startsWith( 'file:///' ) ) { - return setLocalURL( url ); - } else if ( url.startsWith( 'https://' ) ) { - return setNetworkURL( url ); + if ( Platform.isAndroid ) { + if ( url.startsWith( 'https://' ) ) { + RNImage.prefetch( url ) + .then( () => { + setNetworkURL( url ); + setNetworkImageLoaded( true ); + } ) + .catch( () => { + setLocalURL( url ); + } ); + } else { + } + } + + if ( Platform.isIOS ) { + if ( url.startsWith( 'file:///' ) ) { + return setLocalURL( url ); + } else if ( url.startsWith( 'https://' ) ) { + return setNetworkURL( url ); + } } } return () => ( isCurrent = false ); @@ -233,6 +249,7 @@ const ImageComponent = ( { imageHeight && { height: imageHeight }, shapeStyle, ]; + const imageSelectedStyles = [ usePreferredColorSchemeStyle( styles.imageBorder, @@ -241,6 +258,19 @@ const ImageComponent = ( { { height: containerSize?.height }, ]; + const platformURI = Platform.isAndroid + ? /* Android source prop */ + { + uri: networkURL || localURL || url, + } + : /* iOS source prop */ + { + uri: + networkURL && networkImageLoaded + ? networkURL + : ( localURL && localURL ) || url, + }; + return ( ) : ( - - { - setNetworkImageLoaded( true ); - } } - /> + { Platform.isAndroid && ( + <> + { networkImageLoaded && ( + + ) } + { ! networkImageLoaded && ( + + ) } + + ) } + { Platform.isIOS && ( + <> + + { + setNetworkImageLoaded( true ); + } } + /> + + ) } ) } From f7c92321a7034c6f0aa12cfdb36578890896877f Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 17 Jan 2024 21:59:23 +1000 Subject: [PATCH 04/18] Update Image block platform fetching logic --- .../src/mobile/image/index.native.js | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index eced6092c2c510..b9e7086a127810 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -95,6 +95,7 @@ const ImageComponent = ( { setLocalURL( url ); } ); } else { + setLocalURL( url ); } } @@ -213,12 +214,12 @@ const ImageComponent = ( { focalPoint && styles.focalPointContainer, ]; - const opacityValue = useRef( new Animated.Value( 0.3 ) ).current; + const opacityValue = useRef( new Animated.Value( 1 ) ).current; useEffect( () => { Animated.timing( opacityValue, { toValue: isUploadInProgress ? 0.3 : 1, - duration: 200, + duration: 100, useNativeDriver: true, } ).start(); }, [ isUploadInProgress, opacityValue ] ); @@ -258,19 +259,6 @@ const ImageComponent = ( { { height: containerSize?.height }, ]; - const platformURI = Platform.isAndroid - ? /* Android source prop */ - { - uri: networkURL || localURL || url, - } - : /* iOS source prop */ - { - uri: - networkURL && networkImageLoaded - ? networkURL - : ( localURL && localURL ) || url, - }; - return ( { Platform.isAndroid && ( <> - { networkImageLoaded && ( + { networkImageLoaded && networkURL && ( ) } - { ! networkImageLoaded && ( + { ! networkImageLoaded && ! networkURL && ( Date: Wed, 17 Jan 2024 22:18:10 +1000 Subject: [PATCH 05/18] Update Android logic for Image block platform fetching logic --- .../src/mobile/image/index.native.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index b9e7086a127810..4d832c25cb46ba 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -85,17 +85,13 @@ const ImageComponent = ( { } ); if ( Platform.isAndroid ) { - if ( url.startsWith( 'https://' ) ) { - RNImage.prefetch( url ) - .then( () => { - setNetworkURL( url ); - setNetworkImageLoaded( true ); - } ) - .catch( () => { - setLocalURL( url ); - } ); - } else { - setLocalURL( url ); + if ( url.startsWith( 'file:///' ) ) { + return setLocalURL( url ); + } else if ( url.startsWith( 'https://' ) ) { + RNImage.prefetch( url ).then( () => { + setNetworkURL( url ); + setNetworkImageLoaded( true ); + } ); } } From 7c032ce502cb35eb69da2d2ef610c71c38d2fde2 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 18 Jan 2024 11:13:46 +1000 Subject: [PATCH 06/18] Add further updates to Image block platform logic --- .../src/mobile/image/index.native.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 4d832c25cb46ba..09b3140220f9ec 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -84,22 +84,16 @@ const ImageComponent = ( { } } ); - if ( Platform.isAndroid ) { - if ( url.startsWith( 'file:///' ) ) { - return setLocalURL( url ); - } else if ( url.startsWith( 'https://' ) ) { + if ( url.startsWith( 'file:///' ) ) { + setLocalURL( url ); + } else if ( url.startsWith( 'https://' ) ) { + if ( Platform.isAndroid ) { RNImage.prefetch( url ).then( () => { setNetworkURL( url ); setNetworkImageLoaded( true ); } ); - } - } - - if ( Platform.isIOS ) { - if ( url.startsWith( 'file:///' ) ) { - return setLocalURL( url ); - } else if ( url.startsWith( 'https://' ) ) { - return setNetworkURL( url ); + } else if ( Platform.isIOS ) { + setNetworkURL( url ); } } } @@ -322,7 +316,6 @@ const ImageComponent = ( { <> Date: Thu, 18 Jan 2024 14:41:14 +1000 Subject: [PATCH 07/18] Fix code formatting issue in Image block source prop --- .../components/src/mobile/image/index.native.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 09b3140220f9ec..169c73338c8536 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -316,18 +316,20 @@ const ImageComponent = ( { <> { setNetworkImageLoaded( true ); From cd7b8e21fb86e212f5f3017cff038075565ed900 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 18 Jan 2024 16:30:39 +1000 Subject: [PATCH 08/18] Resolve RNImage.prefetch promise --- .../components/src/mobile/image/index.native.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 169c73338c8536..fc804318d3622b 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -87,13 +87,16 @@ const ImageComponent = ( { if ( url.startsWith( 'file:///' ) ) { setLocalURL( url ); } else if ( url.startsWith( 'https://' ) ) { - if ( Platform.isAndroid ) { - RNImage.prefetch( url ).then( () => { - setNetworkURL( url ); - setNetworkImageLoaded( true ); - } ); - } else if ( Platform.isIOS ) { + if ( Platform.isIOS ) { setNetworkURL( url ); + } else if ( Platform.isAndroid ) { + const result = RNImage.prefetch( url ); + if ( result ) { + RNImage.prefetch( url ).then( () => { + setNetworkURL( url ); + setNetworkImageLoaded( true ); + } ); + } } } } From efe77ae88bb07e267c592130ed5eb79214ae7269 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Fri, 19 Jan 2024 14:41:39 +1000 Subject: [PATCH 09/18] Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 7a1f6997d2a130..00eb77b12fb6aa 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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] From 607af4025df19455ad2ded4c2fdf67d63665b5e9 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 22 Jan 2024 11:34:07 +1000 Subject: [PATCH 10/18] Update non-visible image styles Resolves layout display issue when block is selected --- packages/components/src/mobile/image/style.native.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss index cebc097de8cdc5..2235f83d8e85d0 100644 --- a/packages/components/src/mobile/image/style.native.scss +++ b/packages/components/src/mobile/image/style.native.scss @@ -173,7 +173,7 @@ } .nonVisibleImage { - height: 1; - width: 1; + height: 0; + width: 0; opacity: 0; } From c2ef86866bcf2f874639e133970fd52508bc41c7 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 24 Jan 2024 12:31:23 +1000 Subject: [PATCH 11/18] Remove duplicate references to localURL --- packages/components/src/mobile/image/index.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index fc804318d3622b..9557991065db89 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -323,8 +323,7 @@ const ImageComponent = ( { uri: networkURL && networkImageLoaded ? networkURL - : ( localURL && localURL ) || - url, + : localURL || url, } } { ...( ! focalPoint && { resizeMethod: 'scale', From 0b3839adba42589e7b739d317f6fbbb0a936940b Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 24 Jan 2024 12:49:52 +1000 Subject: [PATCH 12/18] Fix Replace Image behavior to update from localURL --- .../src/mobile/image/index.native.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 9557991065db89..05e4045472508e 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -85,6 +85,15 @@ const ImageComponent = ( { } ); if ( url.startsWith( 'file:///' ) ) { + if ( ! isCurrent ) { + return; + } + + if ( url !== localURL ) { + setNetworkImageLoaded( false ); + setNetworkURL( false ); + } + setLocalURL( url ); } else if ( url.startsWith( 'https://' ) ) { if ( Platform.isIOS ) { @@ -92,10 +101,11 @@ const ImageComponent = ( { } else if ( Platform.isAndroid ) { const result = RNImage.prefetch( url ); if ( result ) { - RNImage.prefetch( url ).then( () => { - setNetworkURL( url ); - setNetworkImageLoaded( true ); - } ); + if ( ! isCurrent ) { + return; + } + setNetworkURL( url ); + setNetworkImageLoaded( true ); } } } From e71e4bfd07b3764d7871bd2648f26641a76d9f2c Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 24 Jan 2024 21:09:49 +1000 Subject: [PATCH 13/18] Refactor Image block URL handling logic --- .../src/mobile/image/index.native.js | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 05e4045472508e..c97e5298aa131e 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -85,28 +85,23 @@ const ImageComponent = ( { } ); if ( url.startsWith( 'file:///' ) ) { - if ( ! isCurrent ) { - return; - } - - if ( url !== localURL ) { - setNetworkImageLoaded( false ); - setNetworkURL( false ); - } - setLocalURL( url ); } else if ( url.startsWith( 'https://' ) ) { if ( Platform.isIOS ) { setNetworkURL( url ); } else if ( Platform.isAndroid ) { - const result = RNImage.prefetch( url ); - if ( result ) { - if ( ! isCurrent ) { - return; + RNImage.prefetch( url ).then( + () => { + if ( ! isCurrent ) { + return; + } + setNetworkURL( url ); + setNetworkImageLoaded( true ); + }, + () => { + // handle error } - setNetworkURL( url ); - setNetworkImageLoaded( true ); - } + ); } } } From 553c243827e4c84cd0f7f30a1697ea967a1c93d1 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Wed, 24 Jan 2024 18:38:14 -0500 Subject: [PATCH 14/18] test: Fix failures due to image component modifications (#58213) The mobile image component introduce new asynchronous effects. We must await the result of those effect, in the form of asserting UI changes from the subsequent state updates, to satisfy the React test utilities expectation that unexpected re-renders do not occur after the test completes. Additionally, there were instances of awaiting `act` invocations that were not asynchronous. The erroneous usage of `await` for these synchronous `act` calls resulted in cryptic errors. In reality, the logic run within these `act` calls are synchronous and should merely be wrapped in `act` to signal that they result in a re-render. --- .../components/src/mobile/image/index.native.js | 6 ++++++ packages/edit-post/src/test/editor.native.js | 13 ++++++++----- test/native/setup.js | 8 ++++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index c97e5298aa131e..e049f1cc1b8d74 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -305,6 +305,7 @@ const ImageComponent = ( { resizeMethod: 'scale', } ) } resizeMode={ imageResizeMode } + testID={ `network-image-${ url }` } /> ) } { ! networkImageLoaded && ! networkURL && ( @@ -334,6 +335,11 @@ const ImageComponent = ( { resizeMethod: 'scale', } ) } resizeMode={ imageResizeMode } + testID={ `network-image-${ + networkURL && networkImageLoaded + ? networkURL + : localURL || url + }` } /> { await initializeEditor(); // Act - await act( () => mediaAppendCallback( MEDIA[ 0 ] ) ); - await act( () => mediaAppendCallback( MEDIA[ 2 ] ) ); + act( () => mediaAppendCallback( MEDIA[ 0 ] ) ); + act( () => mediaAppendCallback( MEDIA[ 2 ] ) ); + await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` ); + await screen.findByTestId( `network-image-${ MEDIA[ 2 ].serverUrl }` ); // Assert expect( getEditorHtml() ).toMatchSnapshot(); @@ -122,10 +124,11 @@ describe( 'Editor', () => { await initializeEditor(); // Act - await act( () => mediaAppendCallback( MEDIA[ 0 ] ) ); + act( () => mediaAppendCallback( MEDIA[ 0 ] ) ); // Unsupported type (PDF file) - await act( () => mediaAppendCallback( MEDIA[ 1 ] ) ); - await act( () => mediaAppendCallback( MEDIA[ 3 ] ) ); + act( () => mediaAppendCallback( MEDIA[ 1 ] ) ); + act( () => mediaAppendCallback( MEDIA[ 3 ] ) ); + await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` ); // Assert expect( getEditorHtml() ).toMatchSnapshot(); diff --git a/test/native/setup.js b/test/native/setup.js index 4fa76845d6e8e0..493f6902ee3571 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -284,6 +284,14 @@ jest.spyOn( Image, 'getSize' ).mockImplementation( ( url, success ) => success( 0, 0 ) ); +jest.spyOn( Image, 'prefetch' ).mockImplementation( + ( url, callback = () => {} ) => { + const mockRequestId = `mockRequestId-${ url }`; + callback( mockRequestId ); + return Promise.resolve( true ); + } +); + jest.mock( 'react-native/Libraries/Utilities/BackHandler', () => { return jest.requireActual( 'react-native/Libraries/Utilities/__mocks__/BackHandler.js' From 70b003a66aea6ee7d326638d0bfc33fd73c304e2 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 25 Jan 2024 16:15:49 +1000 Subject: [PATCH 15/18] Update nonVisibleImage styles Using width: 1 and height: 1 ensures that onLoad will fire --- packages/components/src/mobile/image/style.native.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss index 2235f83d8e85d0..cebc097de8cdc5 100644 --- a/packages/components/src/mobile/image/style.native.scss +++ b/packages/components/src/mobile/image/style.native.scss @@ -173,7 +173,7 @@ } .nonVisibleImage { - height: 0; - width: 0; + height: 1; + width: 1; opacity: 0; } From 541a2426d283a7c80bd00966515046744f4956e9 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Tue, 30 Jan 2024 17:15:21 +1000 Subject: [PATCH 16/18] Update packages/components/src/mobile/image/index.native.js Co-authored-by: David Calhoun --- packages/components/src/mobile/image/index.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index e049f1cc1b8d74..e84b8a5f7049c5 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -86,6 +86,8 @@ const ImageComponent = ( { if ( url.startsWith( 'file:///' ) ) { setLocalURL( url ); + setNetworkURL( null ); + setNetworkImageLoaded( false ); } else if ( url.startsWith( 'https://' ) ) { if ( Platform.isIOS ) { setNetworkURL( url ); From ee04f79124d975013a41a7a96673531c87b5acf5 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Tue, 30 Jan 2024 17:20:10 +1000 Subject: [PATCH 17/18] Update RNImage error handler event with code comment --- packages/components/src/mobile/image/index.native.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index e049f1cc1b8d74..3b016c59ca4801 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -99,7 +99,11 @@ const ImageComponent = ( { setNetworkImageLoaded( true ); }, () => { - // handle error + // This callback is called when the image fails to load, + // but these events are handled by `isUploadFailed` + // and `isUploadPaused` events instead. + // + // Ignoring the error event will persist the local image URI. } ); } From 9718e9dff74659ff443719dbba42997c80b5f081 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 31 Jan 2024 14:18:16 +1000 Subject: [PATCH 18/18] Update selected images styles on iOS to account for non-visible image On iOS, add 1 to height to account for the 1px non-visible image that is used to determine when the network image has loaded We also must verify that it is not NaN, as it can be NaN when the image is loading. --- .../src/mobile/image/index.native.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 2aaea8159e3df2..0b9588eb3ac8ac 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -255,12 +255,28 @@ const ImageComponent = ( { shapeStyle, ]; + // On iOS, add 1 to height to account for the 1px non-visible image + // that is used to determine when the network image has loaded + // We also must verify that it is not NaN, as it can be NaN when the image is loading. + // This is not necessary on Android as the non-visible image is not used. + let calculatedSelectedHeight; + if ( Platform.isIOS ) { + calculatedSelectedHeight = + containerSize && ! isNaN( containerSize.height ) + ? containerSize.height + 1 + : 0; + } else { + calculatedSelectedHeight = containerSize?.height; + } + const imageSelectedStyles = [ usePreferredColorSchemeStyle( styles.imageBorder, styles.imageBorderDark ), - { height: containerSize?.height }, + { + height: calculatedSelectedHeight, + }, ]; return (