diff --git a/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js b/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js index df75c5d78e9c20..d891f145aec9b2 100644 --- a/packages/components/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js +++ b/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; diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js index 7a2887314ee3d8..a9bac190b6d004 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/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 ( { + const onKeyboardWillChangeFrame = ( event ) => { + setFloating( event.endCoordinates.width !== windowWidth ); + }; + + Keyboard.addListener( + 'keyboardWillChangeFrame', + onKeyboardWillChangeFrame + ); + return () => { + Keyboard.removeListener( + 'keyboardWillChangeFrame', + onKeyboardWillChangeFrame + ); + }; + }, [ windowWidth ] ); + + return floating; +} diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index c66a5df07edd37..2f077069c99d88 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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