Fix keyboard aware scroll view related problem (#291)

* fix: scrollview drag problem * fix: persistant scroll on each click * fix: align seed input to top on Android * fix: code prettier * fix: according to the PR suggestion
novasamatech · Jul 31, 2019 · fe2841a · fe2841a
1 parent e5a9e29
commit fe2841a
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 157 deletions.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -26,7 +26,7 @@
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />

diff --git a/src/components/AccountSeed.js b/src/components/AccountSeed.js
@@ -132,6 +132,7 @@ export default class AccountSeed extends Component {
           style={[styles.input, invalidStyles]}
           multiline
           autoCapitalize="none"
+          textAlignVertical="top"
           onSelectionChange={this.handleCursorPosition}
           {...this.props}
         />

diff --git a/src/components/KeyboardScrollView.js b/src/components/KeyboardScrollView.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Keyboard, Platform } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+class KeyboardScrollView extends React.Component {
+  render() {
+    const defaultProps = { enableAutomaticScroll: true };
+    return Platform.select({
+      ios: (
+        <KeyboardAwareScrollView
+          keyboardDismissMode="interactive"
+          keyboardShouldPersistTaps="handled"
+          {...defaultProps}
+          {...this.props}
+        />
+      ),
+      android: (
+        <KeyboardAwareScrollView
+          keyboardDismissMode="on-drag"
+          onScrollEndDrag={Keyboard.dismiss}
+          keyboardShouldPersistTaps="handled"
+          enableOnAndroid
+          {...defaultProps}
+          {...this.props}
+        />
+      )
+    });
+  }
+}
+
+export default KeyboardScrollView;
diff --git a/src/screens/AccountNew.js b/src/screens/AccountNew.js
@@ -17,20 +17,19 @@
 'use strict';
 
 import React from 'react';
-import { StyleSheet, ScrollView, Text, View } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { StyleSheet, Text, View } from 'react-native';
 import { Subscribe } from 'unstated';
 
 import colors from '../colors';
 import AccountIconChooser from '../components/AccountIconChooser';
 import Background from '../components/Background';
 import Button from '../components/Button';
 import TextInput from '../components/TextInput';
-import TouchableItem from '../components/TouchableItem';
 import { NETWORK_LIST } from '../constants';
 import AccountsStore from '../stores/AccountsStore';
 import { validateSeed } from '../util/account';
 import NetworkButton from '../components/NetworkButton';
+import KeyboardScrollView from '../components/KeyboardScrollView';
 
 export default class AccountNew extends React.Component {
   static navigationOptions = {
@@ -48,62 +47,57 @@ export default class AccountNew extends React.Component {
 
 class AccountNewView extends React.Component {
   render() {
-    const { accounts } = this.props;
+    const { accounts, navigation } = this.props;
     const selected = accounts.getNew();
     const network = NETWORK_LIST[selected.networkKey];
     if (!selected) {
       return null;
     }
     return (
       <View style={styles.body}>
-        <KeyboardAwareScrollView>
+        <KeyboardScrollView style={{ padding: 20 }}>
           <Background />
-          <ScrollView
-            style={{ padding: 20 }}
-            keyboardDismissMode="on-drag"
-            keyboardShouldPersistTaps="always"
-            containerStyle={styles.bodyContainer}
-          >
-            <View style={styles.top}>
-              <Text style={styles.titleTop}>CREATE ACCOUNT</Text>
-              <Text style={styles.title}>CHOOSE NETWORK</Text>
-              <NetworkButton network={network}/>
-              <Text style={[styles.title, { marginTop: 20 }]}>
-                CHOOSE AN IDENTICON
-              </Text>
-              <AccountIconChooser
-                value={selected && selected.seed && selected.address}
-                onSelect={({ address, bip39, seed }) => {
-                  accounts.updateNew({ address, seed, validBip39Seed: bip39 });
-                }}
-              />
-              <Text style={styles.title}>ACCOUNT NAME</Text>
-              <TextInput
-                onChangeText={name => accounts.updateNew({ name })}
-                value={selected && selected.name}
-                placeholder="Enter a new account name"
-              />
-            </View>
-            <View style={styles.bottom}>
-              <Text style={styles.hintText}>
-                On the next step you will be asked to backup your account, get pen
-                and paper ready
-              </Text>
-              <Button
-                buttonStyles={styles.nextStep}
-                title="Next Step"
-                disabled={ !validateSeed(selected.seed, selected.validBip39Seed).valid }
-                onPress={() => {
-                  validateSeed(selected.seed, selected.validBip39Seed).valid &&
-                    this.props.navigation.navigate('AccountBackup', {
-                      isNew: true,
-                      isWelcome: this.props.navigation.getParam('isWelcome')
-                    });
-                }}
-              />
-            </View>
-          </ScrollView>
-        </KeyboardAwareScrollView>
+          <View style={styles.top}>
+            <Text style={styles.titleTop}>CREATE ACCOUNT</Text>
+            <Text style={styles.title}>CHOOSE NETWORK</Text>
+            <NetworkButton network={network} />
+            <Text style={[styles.title, { marginTop: 20 }]}>
+              CHOOSE AN IDENTICON
+            </Text>
+            <AccountIconChooser
+              value={selected && selected.seed && selected.address}
+              onSelect={({ address, bip39, seed }) => {
+                accounts.updateNew({ address, seed, validBip39Seed: bip39 });
+              }}
+            />
+            <Text style={styles.title}>ACCOUNT NAME</Text>
+            <TextInput
+              onChangeText={name => accounts.updateNew({ name })}
+              value={selected && selected.name}
+              placeholder="Enter a new account name"
+            />
+          </View>
+          <View style={styles.bottom}>
+            <Text style={styles.hintText}>
+              On the next step you will be asked to backup your account, get pen
+              and paper ready
+            </Text>
+            <Button
+              buttonStyles={styles.nextStep}
+              title="Next Step"
+              disabled={
+                !validateSeed(selected.seed, selected.validBip39Seed).valid
+              }
+              onPress={() => {
+                validateSeed(selected.seed, selected.validBip39Seed).valid &&
+                  navigation.navigate('AccountBackup', {
+                    isNew: true,
+                    isWelcome: navigation.getParam('isWelcome')
+                  });
+              }}
+            />
+          </View>
+        </KeyboardScrollView>
       </View>
     );
   }