[RNMobile] Fix jumping toolbar (#23684)

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 }

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 (
-		<IOSKeyboardAvoidingView
+		<AnimatedKeyboardAvoidingView
 			{ ...otherProps }
 			behavior="padding"
 			keyboardVerticalOffset={ keyboardVerticalOffset }
+			style={
+				withAnimatedHeight
+					? [ style, { height: animatedHeight } ]
+					: style
+			}
 		/>
 	);
 };

packages/edit-post/src/components/layout/index.native.js

@@ -153,6 +153,7 @@ class Layout extends Component {
 					<KeyboardAvoidingView
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
+						withAnimatedHeight
 					>
 						{ isTemplatePickerAvailable && (
 							<__experimentalPageTemplatePicker