Fix LinkPicker freeze when virtual keyboard is hidden (#37782)

* Fix LinkPicker freeze when virtual keyboard is hidden

When a devices virtual keyboard is hidden, e.g. when a hardware
keyboard is connected, dismissing the `LinkPicker` resulted in the
application freezing. The freeze likely originates from an unconsumed
`LayoutAnimation` registered during resizing of the `BottomSheet`.

To address this issue, we now avoid registering a `LayoutAnimation`
whenever the changes to the header are sub-pixel values, which can
result in the `LayoutAnimation` going unconsumed. https://git.io/J9q2G

Long-term, we should likely consider refactoring the `BottomSheet` to
holistically avoid stacking `LayoutAnimations`: https://git.io/J9q2l

* Support unique BottomSheet header testID

This allows individual tests to pass a unique, top-level testID for the BottomSheet and have it propagate to the header as well, which may make querying easier.

Co-authored-by: Carlos Garcia <[email protected]>

* Fix indentation issue in bottom sheet component

* Add change log entry

* Add pull request reference to change log entry

Co-authored-by: Carlos Garcia <[email protected]>

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -285,7 +285,10 @@ class BottomSheet extends Component {
 		const { height } = nativeEvent.layout;
 		// The layout animation should only be triggered if the header
 		// height has changed after being mounted.
-		if ( this.headerHeight !== 0 && height !== this.headerHeight ) {
+		if (
+			this.headerHeight !== 0 &&
+			Math.round( height ) !== Math.round( this.headerHeight )
+		) {
 			this.performRegularLayoutAnimation( {
 				useLastLayoutAnimation: true,
 			} );
@@ -551,6 +554,7 @@ class BottomSheet extends Component {
 					<View
 						style={ styles.header }
 						onLayout={ this.onHeaderLayout }
+						testID={ `${ rest.testID || 'bottom-sheet' }-header` }
 					>
 						{ showDragIndicator() && (
 							<View style={ styles.dragIndicator } />

packages/components/src/mobile/bottom-sheet/test/index.native.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render } from 'test/helpers';
+import { LayoutAnimation } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../';
+
+it( 'does not animate transitions between header heights differing less than 1 pixel', () => {
+	const screen = render( <BottomSheet isVisible /> );
+
+	const bottomSheetHeader = screen.getByTestId( 'bottom-sheet-header' );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123 } },
+	} );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123.001 } },
+	} );
+
+	expect( LayoutAnimation.configureNext ).not.toHaveBeenCalled();
+} );

packages/react-native-editor/CHANGELOG.md

@@ -16,6 +16,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Fix empty line apperaing when splitting heading blocks on Android 12 [#37279]
 -   [**] Fix missing translations by refactoring the editor initialization code [#37073]
 -   [**] Fix text formatting mode lost after backspace is used [#37676]
+-   [*] Fix app freeze when closing link picker while virtual keyboard is hidden [#37782]
 
 ## 1.68.0
 -   [**] Fix undo/redo functionality in links when applying text format [#36861]