Mobile Release v1.80.1

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 }
 						/>
 					</View>
 				) }

packages/react-native-aztec/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.79.1",
+	"version": "1.80.1",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",

packages/react-native-bridge/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-bridge",
-	"version": "1.79.1",
+	"version": "1.80.1",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",

packages/react-native-editor/CHANGELOG.md

@@ -11,8 +11,13 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.80.1
+-   [*] Image - Workaround for Android and orientation changes [#42900]
+
+## 1.80.0
 -   [*] Add React Native FastImage [#42009]
 -   [*] Block inserter displays block collections [#42405]
+-   [*] Fix incorrect spacing within Image alt text footnote [#42504]
 -   [***] Gallery and Image block - Performance improvements [#42178]
 
 ## 1.79.1

packages/react-native-editor/ios/Podfile.lock

@@ -13,7 +13,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.66.2)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.79.1):
+  - Gutenberg (1.80.1):
     - React-Core (= 0.66.2)
     - React-CoreModules (= 0.66.2)
     - React-RCTImage (= 0.66.2)
@@ -350,7 +350,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6):
     - React-Core
-  - RNTAztecView (1.79.1):
+  - RNTAztecView (1.80.1):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.8)
   - SDWebImage (5.11.1):
@@ -528,7 +528,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 18438b1c04ce502ed681cd19db3f4508964c082a
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 5337263514dd6f09803962437687240c5dc39aa4
-  Gutenberg: 48f62ce78c6a56bffe61e8c971977f5d15ac9598
+  Gutenberg: 52610c70bf85967db2ac899e7edb39a06b763356
   libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
   RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
   RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a
@@ -569,7 +569,7 @@ SPEC CHECKSUMS:
   RNReanimated: b413cc7aa3e2a740d9804cda3a9396a68f9eea7f
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 3635110f8fb135276edc9ee9f73f08b2827fa0fe
+  RNTAztecView: 679c365e24af10692f76cc11cb9de48c20cf727c
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504

packages/react-native-editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.79.1",
+	"version": "1.80.1",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",