[Mobile]Fix placeholder position of block appender (#14386)

* Fix placeholder position of block appender

* Remove unused import

* Change import position

* Remove unused import in css file

* Remove extra container view

* Update travis.yml from master branch to fix CI issues

packages/editor/src/components/default-block-appender/index.native.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/editor';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -21,6 +22,7 @@ export function DefaultBlockAppender( {
 	isVisible,
 	onAppend,
 	placeholder,
+	containerStyle,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -32,16 +34,10 @@ export function DefaultBlockAppender( {
 		<TouchableWithoutFeedback
 			onPress={ onAppend }
 		>
-			<View style={ styles.blockHolder } pointerEvents="box-only">
-				<View style={ styles.blockContainer }>
-					<TextInput
-						style={ styles.textView }
-						textAlignVertical="top"
-						multiline
-						numberOfLines={ 0 }
-						value={ value }
-					/>
-				</View>
+			<View style={ [ styles.blockHolder, containerStyle ] } pointerEvents="box-only">
+				<RichText
+					placeholder={ value }
+				/>
 			</View>
 		</TouchableWithoutFeedback>
 	);

packages/editor/src/components/default-block-appender/style.native.scss

@@ -1,21 +1,5 @@
 // @format
 
-@import "variables.scss";
-@import "colors.scss";
-
 .blockHolder {
 	flex: 1 1 auto;
 }
-
-.blockContainer {
-	background-color: $white;
-	padding-top: 0;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.textView {
-	color: $gray;
-	font-size: 16px;
-	font-family: $default-regular-font;
-}