[RNMobile] Fix toolbar above the keyboard (#24573)

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,19 +3,128 @@
  */
 import {
 	KeyboardAvoidingView as IOSKeyboardAvoidingView,
+	Animated,
+	Keyboard,
 	Dimensions,
+	View,
 } from 'react-native';
+import SafeArea from 'react-native-safe-area';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const AnimatedKeyboardAvoidingView = Animated.createAnimatedComponent(
+	IOSKeyboardAvoidingView
+);
+
+const MIN_HEIGHT = 44;
+
+export const KeyboardAvoidingView = ( {
+	parentHeight,
+	style,
+	withAnimatedHeight = false,
+	...otherProps
+} ) => {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ isKeyboardOpen, setIsKeyboardOpen ] = useState( false );
+	const [ safeAreaBottomInset, setSafeAreaBottomInset ] = useState( 0 );
+	const { height = 0 } = sizes || {};
+
+	const animatedHeight = useRef( new Animated.Value( MIN_HEIGHT ) ).current;
 
-export const KeyboardAvoidingView = ( { parentHeight, ...otherProps } ) => {
 	const { height: fullHeight } = Dimensions.get( 'window' );
 	const keyboardVerticalOffset = fullHeight - parentHeight;
 
+	useEffect( () => {
+		SafeArea.getSafeAreaInsetsForRootView().then(
+			( { safeAreaInsets } ) => {
+				setSafeAreaBottomInset( safeAreaInsets.bottom );
+			}
+		);
+		SafeArea.addEventListener(
+			'safeAreaInsetsForRootViewDidChange',
+			onSafeAreaInsetsUpdate
+		);
+		Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow );
+		Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide );
+
+		return () => {
+			SafeArea.removeEventListener(
+				'safeAreaInsetsForRootViewDidChange',
+				onSafeAreaInsetsUpdate
+			);
+			Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow );
+			Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide );
+		};
+	}, [] );
+
+	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {
+		setSafeAreaBottomInset( safeAreaInsets.bottom );
+	}
+
+	function onKeyboardWillShow( { endCoordinates } ) {
+		setIsKeyboardOpen( true );
+		animatedHeight.setValue( endCoordinates.height + MIN_HEIGHT );
+	}
+
+	function onKeyboardWillHide( { duration, startCoordinates } ) {
+		const animatedListenerId = animatedHeight.addListener(
+			( { value } ) => {
+				if ( value < startCoordinates.height / 3 ) {
+					setIsKeyboardOpen( false );
+				}
+			}
+		);
+
+		Animated.timing( animatedHeight, {
+			toValue: MIN_HEIGHT,
+			duration,
+			useNativeDriver: false,
+		} ).start( () => {
+			animatedHeight.removeListener( animatedListenerId );
+		} );
+	}
+
 	return (
-		<IOSKeyboardAvoidingView
+		<AnimatedKeyboardAvoidingView
 			{ ...otherProps }
 			behavior="padding"
 			keyboardVerticalOffset={ keyboardVerticalOffset }
-		/>
+			style={
+				withAnimatedHeight
+					? [
+							style,
+							{
+								height: animatedHeight,
+								marginBottom: isKeyboardOpen
+									? -safeAreaBottomInset
+									: 0,
+							},
+					  ]
+					: style
+			}
+		>
+			<View
+				style={ [
+					{
+						top: -height + MIN_HEIGHT,
+					},
+					styles.animatedChildStyle,
+					! withAnimatedHeight && styles.defaultChildStyle,
+				] }
+			>
+				{ resizeObserver }
+				{ otherProps.children }
+			</View>
+		</AnimatedKeyboardAvoidingView>
 	);
 };
 

packages/components/src/mobile/keyboard-avoiding-view/styles.native.scss

@@ -0,0 +1,9 @@
+.animatedChildStyle {
+	position: absolute;
+	width: 100%;
+}
+
+.defaultChildStyle {
+	height: 100%;
+	top: 0;
+}

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