diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index ed0f90170f56e..f4eb48866259e 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -372,7 +372,6 @@ class ButtonEdit extends Component { __unstableMobileNoFocusOnMount={ ! isSelected } selectionColor={ textColor } onBlur={ () => { - this.onToggleButtonFocus( false ); this.onSetMaxWidth(); } } onReplace={ onReplace } 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 4c6ee21a8e5e5..4ec199c00ff47 100644 --- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js +++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js @@ -3,18 +3,76 @@ */ import { KeyboardAvoidingView as IOSKeyboardAvoidingView, + Animated, + Keyboard, Dimensions, } from 'react-native'; -export const KeyboardAvoidingView = ( { parentHeight, ...otherProps } ) => { +/** + * WordPress dependencies + */ +import { useState, useEffect, useRef } from '@wordpress/element'; + +const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent( + IOSKeyboardAvoidingView +); + +const MIN_HEIGHT = 44; + +export const KeyboardAvoidingView = ( { + parentHeight, + style, + withAnimatedHeight = false, + ...otherProps +} ) => { + const [ keyboardHeight, setKeyboardHeight ] = useState( 0 ); + const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current; + const { height: fullHeight } = Dimensions.get( 'window' ); const keyboardVerticalOffset = fullHeight - parentHeight; + useEffect( () => { + Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow ); + Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide ); + return () => { + Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow ); + Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide ); + }; + }, [] ); + + useEffect( () => { + animate(); + }, [ keyboardHeight ] ); + + function onKeyboardWillShow( { endCoordinates } ) { + setKeyboardHeight( endCoordinates.height ); + } + + function onKeyboardWillHide() { + setKeyboardHeight( 0 ); + } + + const paddedKeyboardHeight = + keyboardHeight + MIN_HEIGHT - ( style.bottom || 0 ); + + function animate() { + Animated.timing( animatedHeight, { + toValue: keyboardHeight ? paddedKeyboardHeight : MIN_HEIGHT, + duration: keyboardHeight ? 0 : 150, + useNativeDriver: false, + } ).start(); + } + return ( - ); }; diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js index 1eaaa479c9ffd..b17456d8ec9f6 100644 --- a/packages/edit-post/src/components/layout/index.native.js +++ b/packages/edit-post/src/components/layout/index.native.js @@ -153,6 +153,7 @@ class Layout extends Component { { isTemplatePickerAvailable && ( <__experimentalPageTemplatePicker