diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index abd4d86f9a166..7260fc5f7abb0 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -1,7 +1,12 @@ /** * External dependencies */ -import { Image as RNImage, Text, View } from 'react-native'; +import { + Image as RNImage, + Text, + View, + useWindowDimensions, +} from 'react-native'; import FastImage from 'react-native-fast-image'; /** @@ -11,7 +16,7 @@ import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/components'; import { image as icon } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useState, useRef, Platform } from '@wordpress/element'; /** * Internal dependencies @@ -54,6 +59,10 @@ const ImageComponent = ( { } ) => { const [ imageData, setImageData ] = useState( null ); const [ containerSize, setContainerSize ] = useState( null ); + const [ shouldUseFallback, setShouldUseFallback ] = useState( false ); + const { height: windowHeight, width: windowWidth } = useWindowDimensions(); + const isLandscape = useRef( windowWidth > windowHeight ); + const Image = ! shouldUseFastImage ? RNImage : FastImage; const imageResizeMode = ! shouldUseFastImage ? resizeMode @@ -80,6 +89,21 @@ const ImageComponent = ( { return () => ( isCurrent = false ); }, [ url ] ); + // Workaround for Android where changing the orientation breaks FastImage + // for now if there's any orientation changes, it will use the fallback + // prop to use the default Image component. + // https://github.com/WordPress/gutenberg/issues/42869 + useEffect( () => { + if ( Platform.isAndroid && shouldUseFastImage ) { + const isCurrentOrientationLandscape = windowWidth > windowHeight; + + if ( isLandscape.current !== isCurrentOrientationLandscape ) { + setShouldUseFallback( true ); + isLandscape.current = isCurrentOrientationLandscape; + } + } + }, [ windowHeight, windowWidth ] ); + const onContainerLayout = ( event ) => { const { height, width } = event.nativeEvent.layout; @@ -226,6 +250,7 @@ const ImageComponent = ( { resizeMethod: 'scale', } ) } resizeMode={ imageResizeMode } + fallback={ shouldUseFallback } /> ) }