Mobile: Fix links ui on landscape iOS

.travis.yml

@@ -21,6 +21,7 @@ cache:
 branches:
   only:
     - master
+    - rnmobile/release-v1.0
 
 before_install:
   - nvm install

packages/components/src/primitives/svg/style.native.scss

@@ -12,3 +12,8 @@
 	color: #87a6bc;
 	fill: currentColor;
 }
+
+.dashicons-format-image {
+	color: #2e4453;
+	fill: currentColor;
+}

packages/editor/src/components/media-placeholder/index.native.js

@@ -18,7 +18,7 @@ function MediaPlaceholder( props ) {
 	return (
 		<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
 			<View style={ styles.emptyStateContainer }>
-				<Dashicon icon={ 'format-image' } />
+				<Dashicon ariaPressed={ 'dashicons-format-image' } icon={ 'format-image' } />
 				<Text style={ styles.emptyStateTitle }>
 					{ __( 'Image' ) }
 				</Text>

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;