Fix Android paste (#469)

* fix android paste

* snapshot

* email-address

* auto complete off

* snapshots

* mounted

Author: estebanmino

app/components/UI/AddCustomCollectible/__snapshots__/index.test.js.snap

@@ -46,14 +46,17 @@ exports[`AddCustomCollectible should render correctly 1`] = `
         onSubmitEditing={[Function]}
         placeholder="0x..."
         style={
-          Object {
-            "borderColor": "#CCCCCC",
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "fontFamily": "Roboto",
-            "fontWeight": "400",
-            "padding": 16,
-          }
+          Array [
+            Object {
+              "borderColor": "#CCCCCC",
+              "borderRadius": 4,
+              "borderWidth": 1,
+              "fontFamily": "Roboto",
+              "fontWeight": "400",
+              "padding": 16,
+            },
+            Object {},
+          ]
         }
         testID="input-collectible-address"
         underlineColorAndroid="transparent"
@@ -95,14 +98,17 @@ exports[`AddCustomCollectible should render correctly 1`] = `
         placeholder=""
         returnKeyType="done"
         style={
-          Object {
-            "borderColor": "#CCCCCC",
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "fontFamily": "Roboto",
-            "fontWeight": "400",
-            "padding": 16,
-          }
+          Array [
+            Object {
+              "borderColor": "#CCCCCC",
+              "borderRadius": 4,
+              "borderWidth": 1,
+              "fontFamily": "Roboto",
+              "fontWeight": "400",
+              "padding": 16,
+            },
+            Object {},
+          ]
         }
         testID="input-token-decimals"
         underlineColorAndroid="transparent"

app/components/UI/AddCustomCollectible/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, Text, TextInput, View, StyleSheet } from 'react-native';
+import { Platform, Alert, Text, TextInput, View, StyleSheet } from 'react-native';
 import { colors, fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
@@ -36,7 +36,8 @@ const styles = StyleSheet.create({
 class AddCustomCollectible extends Component {
 	state = {
 		address: '',
-		tokenId: ''
+		tokenId: '',
+		inputWidth: Platform.OS === 'android' ? '99%' : undefined
 	};
 
 	static propTypes = {
@@ -50,6 +51,19 @@ class AddCustomCollectible extends Component {
 		selectedAddress: PropTypes.string
 	};
 
+	componentDidMount = () => {
+		this.mounted = true;
+		// Workaround https://github.com/facebook/react-native/issues/9958
+		this.state.inputWidth &&
+			setTimeout(() => {
+				this.mounted && this.setState({ inputWidth: '100%' });
+			}, 100);
+	};
+
+	componentWillUnmount = () => {
+		this.mounted = false;
+	};
+
 	addCollectible = async () => {
 		if (!(await this.validateCustomCollectible())) return;
 		const isOwner = await this.validateCollectibleOwnership();
@@ -149,7 +163,7 @@ class AddCustomCollectible extends Component {
 				<View style={styles.rowWrapper}>
 					<Text style={fontStyles.normal}>{strings('collectible.collectible_address')}</Text>
 					<TextInput
-						style={styles.textInput}
+						style={[styles.textInput, this.state.inputWidth ? { width: this.state.inputWidth } : {}]}
 						placeholder={'0x...'}
 						value={this.state.address}
 						onChangeText={this.onAddressChange}
@@ -162,7 +176,7 @@ class AddCustomCollectible extends Component {
 				<View style={styles.rowWrapper}>
 					<Text style={fontStyles.normal}>{strings('collectible.collectible_token_id')}</Text>
 					<TextInput
-						style={styles.textInput}
+						style={[styles.textInput, this.state.inputWidth ? { width: this.state.inputWidth } : {}]}
 						value={this.state.tokenId}
 						keyboardType="numeric"
 						placeholder={''}

app/components/UI/HomePage/index.js

@@ -86,7 +86,6 @@ const styles = StyleSheet.create({
 		marginHorizontal: 10,
 		backgroundColor: colors.white,
 		fontSize: 14,
-		flex: 1,
 		...fontStyles.normal
 	},
 	searchIcon: {
@@ -183,21 +182,29 @@ class HomePage extends Component {
 
 	state = {
 		searchInputValue: '',
-		inputValue: ''
+		inputValue: '',
+		inputWidth: Platform.OS === 'android' ? '99%' : undefined
 	};
 
 	actionSheet = null;
 
 	bookmarkIndexToRemove = null;
 
-	componentDidMount() {
+	componentDidMount = () => {
 		if (Platform.OS === 'android') {
 			this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
 		}
-	}
+		this.mounted = true;
+		// Workaround https://github.com/facebook/react-native/issues/9958
+		this.state.inputWidth &&
+			setTimeout(() => {
+				this.mounted && this.setState({ inputWidth: '100%' });
+			}, 100);
+	};
 
 	componentWillUnmount() {
 		Platform.OS === 'android' && this.keyboardDidHideListener.remove();
+		this.mounted = false;
 	}
 
 	onInitialUrlChange = searchInputValue => {
@@ -260,7 +267,10 @@ class HomePage extends Component {
 						<View style={styles.searchWrapper}>
 							<Icon name="search" size={18} color={colors.asphalt} style={styles.searchIcon} />
 							<TextInput
-								style={styles.searchInput}
+								style={[
+									styles.searchInput,
+									this.state.inputWidth ? { width: this.state.inputWidth } : {}
+								]}
 								autoCapitalize="none"
 								autoCorrect={false}
 								clearButtonMode="while-editing"

app/components/Views/AdvancedSettings/index.js

@@ -121,7 +121,21 @@ class Settings extends Component {
 	state = {
 		resetModalVisible: false,
 		rpcUrl: undefined,
-		warningRpcUrl: ''
+		warningRpcUrl: '',
+		inputWidth: Platform.OS === 'android' ? '99%' : undefined
+	};
+
+	componentDidMount = () => {
+		this.mounted = true;
+		// Workaround https://github.com/facebook/react-native/issues/9958
+		this.state.inputWidth &&
+			setTimeout(() => {
+				this.mounted && this.setState({ inputWidth: '100%' });
+			}, 100);
+	};
+
+	componentWillUnmount = () => {
+		this.mounted = false;
 	};
 
 	displayResetAccountModal = () => {
@@ -221,9 +235,10 @@ class Settings extends Component {
 						<Text style={styles.title}>{strings('app_settings.new_RPC_URL')}</Text>
 						<Text style={styles.desc}>{strings('app_settings.rpc_desc')}</Text>
 						<TextInput
+							style={[styles.input, this.state.inputWidth ? { width: this.state.inputWidth } : {}]}
 							autoCapitalize={'none'}
+							autoComplete={'off'}
 							autoCorrect={false}
-							style={styles.input}
 							value={this.state.rpcUrl}
 							onBlur={this.addRpcUrl}
 							onChangeText={this.onRpcUrlChange}

app/components/Views/ImportFromSeed/__snapshots__/index.test.js.snap

@@ -52,7 +52,7 @@ exports[`ImportFromSeed should render correctly 1`] = `
       <TextInput
         allowFontScaling={true}
         autoCapitalize="none"
-        autoComplete="false"
+        autoComplete="off"
         blurOnSubmit={true}
         keyboardType="default"
         multiline={true}
@@ -62,22 +62,26 @@ exports[`ImportFromSeed should render correctly 1`] = `
         placeholder="Enter your seed phrase here"
         returnKeyType="next"
         style={
-          Object {
-            "backgroundColor": "#FFFFFF",
-            "borderColor": "#CCCCCC",
-            "borderRadius": 10,
-            "borderWidth": 0.5,
-            "fontFamily": "Roboto",
-            "fontSize": 20,
-            "fontWeight": "400",
-            "height": 110,
-            "marginBottom": 10,
-            "marginTop": 10,
-            "paddingBottom": 20,
-            "paddingLeft": 20,
-            "paddingRight": 20,
-            "paddingTop": 20,
-          }
+          Array [
+            Object {
+              "backgroundColor": "#FFFFFF",
+              "borderColor": "#CCCCCC",
+              "borderRadius": 10,
+              "borderWidth": 0.5,
+              "fontFamily": "Roboto",
+              "fontSize": 20,
+              "fontWeight": "400",
+              "height": "auto",
+              "marginBottom": 10,
+              "marginTop": 10,
+              "minHeight": 110,
+              "paddingBottom": 20,
+              "paddingLeft": 20,
+              "paddingRight": 20,
+              "paddingTop": 20,
+            },
+            Object {},
+          ]
         }
         testID="input-seed-phrase"
         underlineColorAndroid="transparent"

app/components/Views/ImportFromSeed/index.js

@@ -75,7 +75,8 @@ const styles = StyleSheet.create({
 		paddingRight: 20,
 		fontSize: 20,
 		borderRadius: 10,
-		height: 110,
+		minHeight: 110,
+		height: 'auto',
 		borderWidth: StyleSheet.hairlineWidth,
 		borderColor: colors.borderColor,
 		...fontStyles.normal
@@ -130,11 +131,10 @@ class ImportFromSeed extends Component {
 		rememberMe: false,
 		biometryChoice: false,
 		loading: false,
-		error: null
+		error: null,
+		inputWidth: Platform.OS === 'android' ? '99%' : undefined
 	};
 
-	mounted = true;
-
 	passwordInput = React.createRef();
 	confirmPasswordInput = React.createRef();
 
@@ -143,11 +143,17 @@ class ImportFromSeed extends Component {
 		if (biometryType) {
 			this.setState({ biometryType, biometryChoice: true });
 		}
+		this.mounted = true;
+		// Workaround https://github.com/facebook/react-native/issues/9958
+		this.state.inputWidth &&
+			setTimeout(() => {
+				this.mounted && this.setState({ inputWidth: '100%' });
+			}, 100);
 	}
 
-	componentWillUnmount() {
+	componentWillUnmount = () => {
 		this.mounted = false;
-	}
+	};
 
 	onPressImport = async () => {
 		if (this.state.loading) return;
@@ -288,15 +294,15 @@ class ImportFromSeed extends Component {
 						value={this.state.seedWords}
 						numberOfLines={3}
 						multiline
-						style={styles.seedPhrase}
+						style={[styles.seedPhrase, this.state.inputWidth ? { width: this.state.inputWidth } : {}]}
 						placeholder={strings('import_from_seed.seed_phrase_placeholder')}
 						onChangeText={this.onSeedWordsChange}
 						testID={'input-seed-phrase'}
 						blurOnSubmit
 						onSubmitEditing={this.jumpToPassword}
 						returnKeyType={'next'}
-						autoComplete="false"
-						keyboardType={Platform.OS === 'android' ? 'visible-password' : 'default'}
+						autoComplete={'off'}
+						keyboardType={Platform.OS === 'android' ? 'email-address' : 'default'}
 						autoCapitalize="none"
 					/>
 					<View style={styles.field}>

app/components/Views/ImportPrivateKey/__snapshots__/index.test.js.snap

@@ -181,6 +181,8 @@ exports[`ImportPrivateKey should render correctly 1`] = `
         </View>
         <TextInput
           allowFontScaling={true}
+          autoCapitalize="none"
+          autoComplete="off"
           blurOnSubmit={true}
           multiline={true}
           numberOfLines={3}
@@ -189,22 +191,25 @@ exports[`ImportPrivateKey should render correctly 1`] = `
           placeholder="e.g. 3a1076bf45ab87712ad64ccb3b10217737f7faacbf2872e88fdd9a537d8fe266"
           returnKeyType="next"
           style={
-            Object {
-              "backgroundColor": "#FFFFFF",
-              "borderColor": "#CCCCCC",
-              "borderRadius": 4,
-              "borderWidth": 0.5,
-              "fontFamily": "Roboto",
-              "fontSize": 15,
-              "fontWeight": "400",
-              "height": 120,
-              "marginBottom": 10,
-              "marginTop": 20,
-              "paddingBottom": 20,
-              "paddingLeft": 20,
-              "paddingRight": 20,
-              "paddingTop": 20,
-            }
+            Array [
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "borderColor": "#CCCCCC",
+                "borderRadius": 4,
+                "borderWidth": 0.5,
+                "fontFamily": "Roboto",
+                "fontSize": 15,
+                "fontWeight": "400",
+                "height": 120,
+                "marginBottom": 10,
+                "marginTop": 20,
+                "paddingBottom": 20,
+                "paddingLeft": 20,
+                "paddingRight": 20,
+                "paddingTop": 20,
+              },
+              Object {},
+            ]
           }
           testID="input-private-key"
           underlineColorAndroid="transparent"