fix(rn): android paste publickey

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Sep 21, 2018 · cee0498 · cee0498
1 parent eb3d34e
commit cee0498
Showing 1 changed file with 30 additions and 4 deletions.
diff --git a/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js b/client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { TextInput } from 'react-native'
+import { TextInput as TextInputNative } from 'react-native'
 import { Flex, Screen, Button } from '../../../Library'
 import { colors } from '../../../../constants'
 import {
@@ -13,6 +13,31 @@ import {
 import { mutations } from '../../../../graphql'
 import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
 
+class TextInputMultilineFix extends PureComponent {
+  state = {
+    multiline: true,
+  }
+
+  render () {
+    return (
+      <TextInputNative
+        onFocus={() =>
+          this.setState({ multiline: false }, () =>
+            this.setState({ multiline: true })
+          )
+        }
+        onBlur={() =>
+          this.setState({ multiline: false }, () =>
+            this.setState({ multiline: true })
+          )
+        }
+        multiline={this.state.multiline}
+        {...this.props}
+      />
+    )
+  }
+}
+
 class ByPublicKey extends PureComponent {
   state = {
     contactID: '',
@@ -29,32 +54,33 @@ class ByPublicKey extends PureComponent {
     return (
       <Screen style={[{ backgroundColor: colors.white }, paddingVertical]}>
         <Flex.Rows style={[padding]} align='center'>
-          <TextInput
+          <TextInputMultilineFix
             style={[
               {
                 width: 330,
                 height: 330,
                 backgroundColor: colors.grey7,
                 color: colors.black,
+                flexWrap: 'wrap',
               },
               textTiny,
               padding,
               marginTop,
               rounded,
             ]}
-            multiline
             placeholder='Type or copy/paste a berty user public key here'
             value={routeName === 'Enter a public key' ? contactID : myID}
             onChangeText={
               routeName === 'Enter a public key'
                 ? contactID => this.setState({ contactID })
                 : undefined
             }
+            selectTextOnFocus
           />
           {routeName === 'Enter a public key' && (
             <Button
               icon='plus'
-              background='blue'
+              background={colors.blue}
               margin
               padding
               rounded={23}