[RNMobile] Handle floating keyboard case (#33089)

* Handle floating keyboard case in KeyboardAvoidingView

* Handle floating keyboard case in bottom sheet

* Update react-native-editor changelog

packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -38,6 +38,12 @@ class KeyboardAvoidingView extends Component {
 			return 0;
 		}
 
+		const windowWidth = Dimensions.get( 'window' ).width;
+		const isFloatingKeyboard = keyboardFrame.width !== windowWidth;
+		if ( isFloatingKeyboard ) {
+			return 0;
+		}
+
 		const windowHeight = Dimensions.get( 'window' ).height;
 		const keyboardY =
 			keyboardFrame.screenY - this.props.keyboardVerticalOffset;

packages/components/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -19,6 +19,7 @@ import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import useIsFloatingKeyboard from '../utils/use-is-floating-keyboard';
 import styles from './styles.scss';
 
 const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(
@@ -37,6 +38,7 @@ export const KeyboardAvoidingView = ( {
 	const [ isKeyboardOpen, setIsKeyboardOpen ] = useState( false );
 	const [ safeAreaBottomInset, setSafeAreaBottomInset ] = useState( 0 );
 	const { height = 0 } = sizes || {};
+	const floatingKeyboard = useIsFloatingKeyboard();
 
 	const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current;
 
@@ -101,6 +103,7 @@ export const KeyboardAvoidingView = ( {
 	return (
 		<AnimatedKeyboardAvoidingView
 			{ ...otherProps }
+			enabled={ ! floatingKeyboard }
 			behavior="padding"
 			keyboardVerticalOffset={ keyboardVerticalOffset }
 			style={

packages/components/src/mobile/utils/use-is-floating-keyboard.native.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { Keyboard, Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+export default function useIsFloatingKeyboard() {
+	const windowWidth = Dimensions.get( 'window' ).width;
+
+	const [ floating, setFloating ] = useState( false );
+
+	useEffect( () => {
+		const onKeyboardWillChangeFrame = ( event ) => {
+			setFloating( event.endCoordinates.width !== windowWidth );
+		};
+
+		Keyboard.addListener(
+			'keyboardWillChangeFrame',
+			onKeyboardWillChangeFrame
+		);
+		return () => {
+			Keyboard.removeListener(
+				'keyboardWillChangeFrame',
+				onKeyboardWillChangeFrame
+			);
+		};
+	}, [ windowWidth ] );
+
+	return floating;
+}

packages/react-native-editor/CHANGELOG.md

@@ -13,8 +13,8 @@ For each user feature we should also add a importance categorization label  to i
 
 -   [*] Update loading and failed screens for web version of the editor [#32395]
 ## 1.55.2
+-   [*] Handle floating keyboard case - Fix issue with the block selector on iPad. [#33089]
 -   [**] Fix incorrect block insertion point after blurring the post title field. [#32831]
-
 -   [*] Tweaks to the badge component's styling, including change of background color and reduced padding. [#32865]
 
 ## 1.55.1