Use custom button instead of native provided by react-native

WordPress · Dec 19, 2018 · c5eb770 · c5eb770
1 parent a2f53fe
commit c5eb770
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/packages/format-library/src/link/button.native.js b/packages/format-library/src/link/button.native.js
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { TouchableOpacity, View } from 'react-native';
+
+export default function Button( props ) {
+	const {
+		children,
+		onClick,
+		disabled,
+	} = props;
+
+	return (
+		<TouchableOpacity
+			accessible={ true }
+			onPress={ onClick }
+			disabled={ disabled }
+		>
+			<View style={ { flexDirection: 'row' } }>
+				{ children }
+			</View>
+		</TouchableOpacity>
+	);
+}
diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Button, Switch, Text, TextInput, View } from 'react-native';
+import { Switch, Text, TextInput, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
@@ -19,6 +19,7 @@ import {
 } from '@wordpress/rich-text';
 
 import { createLinkFormat, isValidHref } from './utils';
+import Button from './button';
 
 import styles from './modal.scss';
 
@@ -105,21 +106,19 @@ class ModalLinkUI extends Component {
 				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
 					<View style={ styles.dragIndicator } />
 					<View style={ styles.head }>
-						<Button
-							color="red"
-							title={ __( 'Remove' ) }
-							accessibilityLabel={ __( 'Remove the link' ) }
-							onPress={ this.removeLink }
-						/>
+						<Button onClick={ this.removeLink }>
+							<Text style={ { ...styles.buttonText, color: 'red' } }>
+								{ __( 'Remove' ) }
+							</Text>
+						</Button>
 						<Text style={ styles.title }>
 							{ __( 'Link Settings' ) }
 						</Text>
-						<Button
-							color="#0087be"
-							title={ __( 'Done' ) }
-							accessibilityLabel={ __( 'Finish editing the link' ) }
-							onPress={ this.submitLink }
-						/>
+						<Button onClick={ this.submitLink }>
+							<Text style={ { ...styles.buttonText, color: '#0087be' } } >
+								{ __( 'Done' ) }
+							</Text>
+						</Button>
 					</View>
 					<View style={ styles.separator } />
 					<View style={ styles.inlineInput }>

diff --git a/packages/format-library/src/link/modal.native.scss b/packages/format-library/src/link/modal.native.scss
@@ -41,6 +41,10 @@
 	text-align: center;
 }
 
+.buttonText {
+	font-size: 18px;
+}
+
 .inlineInput {
 	flex-direction: row;
 	width: 100%;
@@ -65,3 +69,4 @@
 	align-self: flex-end;
 	padding: 5px;
 }
+