From 1c80d83bbc4b8c5abc0632700491587de79626a4 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 7 Jan 2022 09:37:19 -0600 Subject: [PATCH 1/5] 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 --- .../src/mobile/bottom-sheet/index.native.js | 6 ++++- .../mobile/bottom-sheet/test/index.native.js | 24 +++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 packages/components/src/mobile/bottom-sheet/test/index.native.js diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index f6bfab39dc598c..7ae1bcbd03671d 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/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="bottom-sheet-header" > { showDragIndicator() && ( <View style={ styles.dragIndicator } /> diff --git a/packages/components/src/mobile/bottom-sheet/test/index.native.js b/packages/components/src/mobile/bottom-sheet/test/index.native.js new file mode 100644 index 00000000000000..1475943e8122c1 --- /dev/null +++ b/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(); +} ); From 3f1611b9d3fadf6f2b276b0018165e0e7e88420c Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 7 Jan 2022 10:45:45 -0600 Subject: [PATCH 2/5] 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 <fluiddot@gmail.com> --- packages/components/src/mobile/bottom-sheet/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 7ae1bcbd03671d..6675e99084b672 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -554,7 +554,7 @@ class BottomSheet extends Component { <View style={ styles.header } onLayout={ this.onHeaderLayout } - testID="bottom-sheet-header" + testID={ `${ rest.testID || 'bottom-sheet' }-header` } > { showDragIndicator() && ( <View style={ styles.dragIndicator } /> From 3fdd6b3f64ef8462866636e76a9102389b6877e7 Mon Sep 17 00:00:00 2001 From: Carlos Garcia <fluiddot@gmail.com> Date: Fri, 7 Jan 2022 17:59:54 +0100 Subject: [PATCH 3/5] Fix indentation issue in bottom sheet component --- packages/components/src/mobile/bottom-sheet/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 6675e99084b672..3a0eb277bb1fc5 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -554,7 +554,7 @@ class BottomSheet extends Component { <View style={ styles.header } onLayout={ this.onHeaderLayout } - testID={ `${ rest.testID || 'bottom-sheet' }-header` } + testID={ `${ rest.testID || 'bottom-sheet' }-header` } > { showDragIndicator() && ( <View style={ styles.dragIndicator } /> From 6b7cfcd593dfc9ca6eb8b8af8788e47d690e23f7 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 7 Jan 2022 12:43:41 -0600 Subject: [PATCH 4/5] Add change log entry --- 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 6b3f3a1a048805..8fe3052f91de54 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -14,6 +14,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 ## 1.68.0 - [**] Fix undo/redo functionality in links when applying text format [#36861] From 00f602ea07649c6134b76a0c1bdff3794c0c8fc3 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Fri, 7 Jan 2022 12:44:54 -0600 Subject: [PATCH 5/5] Add pull request reference to change log entry --- packages/react-native-editor/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 8fe3052f91de54..50e75b82a44af2 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -14,7 +14,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 +- [*] 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]