Mobile: Fix links ui on landscape iOS v2 (#14240)

* RNMobile: Adding original versin of keyboard-avoiding-view (to be modified)

* Modified keyboard-avoiding-view to work well with bottom-sheets.

packages/editor/src/components/mobile/bottom-sheet/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, View, KeyboardAvoidingView, Platform, PanResponder, Dimensions } from 'react-native';
+import { Text, View, Platform, PanResponder, Dimensions } from 'react-native';
 import Modal from 'react-native-modal';
 import SafeArea from 'react-native-safe-area';
 
@@ -17,6 +17,7 @@ import styles from './styles.scss';
 import Button from './button';
 import Cell from './cell';
 import PickerCell from './picker-cell';
+import KeyboardAvoidingView from './keyboard-avoiding-view';
 
 class BottomSheet extends Component {
 	constructor() {

packages/editor/src/components/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -0,0 +1,114 @@
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+	Keyboard,
+	LayoutAnimation,
+	Platform,
+	StyleSheet,
+	View,
+	Dimensions,
+} from 'react-native';
+
+/**
+ * This is a simplified version of Facebook's KeyboardAvoidingView.
+ * It's meant to work specifically with BottomSheets.
+ * This fixes an issue in the bottom padding calculation, when the
+ * BottomSheet was presented on Landscape, with the keyboard already present,
+ * and a TextField on Autofocus (situation present on Links UI)
+ */
+class KeyboardAvoidingView extends React.Component {
+	static defaultProps = {
+		enabled: true,
+		keyboardVerticalOffset: 0,
+	};
+
+	_subscriptions = [];
+
+	state = {
+		bottom: 0,
+	};
+
+	_relativeKeyboardHeight( keyboardFrame ) {
+		if ( ! keyboardFrame ) {
+			return 0;
+		}
+
+		const windowHeight = Dimensions.get( 'window' ).height;
+		const keyboardY = keyboardFrame.screenY - this.props.keyboardVerticalOffset;
+
+		const final = Math.max( windowHeight - keyboardY, 0 );
+		return final;
+	}
+
+	/**
+	 * @param {Object} event Keyboard event.
+	 */
+	_onKeyboardChange = ( event ) => {
+		if ( event === null ) {
+			this.setState( { bottom: 0 } );
+			return;
+		}
+
+		const { duration, easing, endCoordinates } = event;
+		const height = this._relativeKeyboardHeight( endCoordinates );
+
+		if ( this.state.bottom === height ) {
+			return;
+		}
+
+		if ( duration && easing ) {
+			LayoutAnimation.configureNext( {
+				duration,
+				update: {
+					duration,
+					type: LayoutAnimation.Types[ easing ] || 'keyboard',
+				},
+			} );
+		}
+		this.setState( { bottom: height } );
+	};
+
+	componentDidMount() {
+		if ( Platform.OS === 'ios' ) {
+			this._subscriptions = [
+				Keyboard.addListener( 'keyboardWillChangeFrame', this._onKeyboardChange ),
+			];
+		}
+	}
+
+	componentWillUnmount() {
+		this._subscriptions.forEach( ( subscription ) => {
+			subscription.remove();
+		} );
+	}
+
+	render() {
+		const {
+			children,
+			enabled,
+			keyboardVerticalOffset, // eslint-disable-line no-unused-vars
+			style,
+			...props
+		} = this.props;
+
+		let finalStyle = style;
+		if ( Platform.OS === 'ios' ) {
+			const bottomHeight = enabled ? this.state.bottom : 0;
+			finalStyle = StyleSheet.compose( style, { paddingBottom: bottomHeight } );
+		}
+
+		return (
+			<View
+				style={ finalStyle }
+				{ ...props }
+			>
+				{ children }
+			</View>
+		);
+	}
+}
+
+export default KeyboardAvoidingView;