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