[RNMobile] another approach to fix jumping toolbar

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,99 @@
  */
 import {
 	KeyboardAvoidingView as IOSKeyboardAvoidingView,
+	Animated,
+	Keyboard,
 	Dimensions,
+	View,
 } from 'react-native';
+import SafeArea from 'react-native-safe-area';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } 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 { 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( () => {
+		Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow );
+		Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide );
+		return () => {
+			Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow );
+			Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide );
+		};
+	}, [] );
+
+	function onKeyboardWillShow( { endCoordinates } ) {
+		SafeArea.getSafeAreaInsetsForRootView().then( ( result ) => {
+			animatedHeight.setValue(
+				endCoordinates.height +
+					MIN_HEIGHT -
+					result.safeAreaInsets.bottom
+			);
+		} );
+	}
+
+	function onKeyboardWillHide( { duration } ) {
+		animate( duration );
+	}
+
+	function animate( duration ) {
+		Animated.timing( animatedHeight, {
+			toValue: MIN_HEIGHT,
+			duration,
+			useNativeDriver: false,
+		} ).start();
+	}
+
 	return (
-		<IOSKeyboardAvoidingView
+		<AnimatedKeyboardAvoidingView
 			{ ...otherProps }
 			behavior="padding"
 			keyboardVerticalOffset={ keyboardVerticalOffset }
-		/>
+			style={
+				withAnimatedHeight
+					? [ style, { height: animatedHeight } ]
+					: 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