Mobile: Fix keyboard avoidance globally (#767)

* Mobile: Fix global keyboard avoidance * Mobile: Remove unused method
iotaledger · Dec 10, 2018 · a62ef8b · a62ef8b
1 parent a9aa824
commit a62ef8b
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 137 deletions.
diff --git a/src/mobile/android/build.gradle b/src/mobile/android/build.gradle
@@ -48,6 +48,13 @@ subprojects {
             }
         }
     }
+    if (project.name.contains('react-native-modal-translucent')) {
+            buildscript {
+                repositories {
+                maven { url "https://dl.bintray.com/android/android-tools/"  }
+            }    
+        }
+    }
     project.configurations.all {
         resolutionStrategy.eachDependency { details ->
         if (details.requested.group == 'com.android.support'

diff --git a/src/mobile/android/settings.gradle b/src/mobile/android/settings.gradle
@@ -1,12 +1,12 @@
 rootProject.name = 'iotaWallet'
+include ':react-native-modal-translucent'
+project(':react-native-modal-translucent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-modal-translucent/android')
 include ':react-native-document-picker'
 project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
 include ':nodejs-mobile-react-native'
 project(':nodejs-mobile-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/nodejs-mobile-react-native/android')
 include ':react-native-fast-crypto'
 project(':react-native-fast-crypto').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-crypto/android')
-include ':react-native-modal-translucent'
-project(':react-native-modal-translucent').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-modal-translucent/android')
 include ':react-native-detect-navbar-android'
 project(':react-native-detect-navbar-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-detect-navbar-android/android')
 include ':react-native-fingerprint-scanner'

diff --git a/src/mobile/src/ui/components/KeyboardMonitor.js b/src/mobile/src/ui/components/KeyboardMonitor.js
@@ -1,8 +1,10 @@
+// Updates global state when keyboard opens/closes. Applies keyboard avoidance globally
+
 import React, { Component } from 'react';
 import { Keyboard } from 'react-native';
 import PropTypes from 'prop-types';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { connect } from 'react-redux';
-import timer from 'react-native-timer';
 import { setKeyboardActivity } from 'shared-modules/actions/ui';
 import { isAndroid } from 'libs/device';
 
@@ -14,6 +16,7 @@ const mapStateToProps = (state) => ({
     isKeyboardActive: state.ui.isKeyboardActive,
     inactive: state.ui.inactive,
     minimised: state.ui.minimised,
+    isModalActive: state.ui.isModalActive,
 });
 
 /**
@@ -32,6 +35,8 @@ export default function withKeyboardMonitor(C) {
             inactive: PropTypes.bool.isRequired,
             /** @ignore */
             minimised: PropTypes.bool.isRequired,
+            /** @ignore */
+            isModalActive: PropTypes.bool.isRequired,
         };
 
         componentWillMount() {
@@ -47,7 +52,6 @@ export default function withKeyboardMonitor(C) {
         componentWillUnmount() {
             this.keyboardWillShowSub.remove();
             this.keyboardWillHideSub.remove();
-            timer.clearTimeout('iOSKeyboardTimeout');
         }
 
         keyboardWillShow = () => {
@@ -58,8 +62,8 @@ export default function withKeyboardMonitor(C) {
             this.props.setKeyboardActivity(true);
         };
 
-        keyboardWillHide = (event) => {
-            timer.setTimeout('iOSKeyboardTimeout', () => this.props.setKeyboardActivity(false), event.duration);
+        keyboardWillHide = () => {
+            this.props.setKeyboardActivity(false);
         };
 
         keyboardDidShow = () => {
@@ -75,7 +79,17 @@ export default function withKeyboardMonitor(C) {
         };
 
         render() {
-            return <C {...this.props} />;
+            return (
+                <KeyboardAwareScrollView
+                    resetScrollToCoords={{ x: 0, y: 0 }}
+                    scrollEnabled={false}
+                    enableAutomaticScroll={!this.props.isModalActive}
+                    extraHeight={0}
+                    contentContainerStyle={{ flex: 1 }}
+                >
+                    <C {...this.props} />
+                </KeyboardAwareScrollView>
+            );
         }
     }
 

diff --git a/src/mobile/src/ui/components/ModalView.js b/src/mobile/src/ui/components/ModalView.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { View, StyleSheet, StatusBar } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import SafeAreaView from 'react-native-safe-area-view';
 import { connect } from 'react-redux';
 import { Styling } from 'ui/theme/general';
@@ -98,7 +99,12 @@ export class ModalViewComponent extends PureComponent {
         } = this.props;
 
         return (
-            <View style={styles.container}>
+            <KeyboardAwareScrollView
+                resetScrollToCoords={{ x: 0, y: 0 }}
+                scrollEnabled={false}
+                extraHeight={0}
+                contentContainerStyle={styles.container}
+            >
                 <SafeAreaView
                     style={[styles.modalContainer, { backgroundColor: body.bg }, { height: this.getModalHeight() }]}
                 >
@@ -113,7 +119,7 @@ export class ModalViewComponent extends PureComponent {
                         />
                     )) || <SingleFooterButton onButtonPress={() => onButtonPress()} buttonText={buttonText} />}
                 </SafeAreaView>
-            </View>
+            </KeyboardAwareScrollView>
         );
     }
 }

diff --git a/src/mobile/src/ui/views/onboarding/SeedVaultBackup.js b/src/mobile/src/ui/views/onboarding/SeedVaultBackup.js
@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 import { withNamespaces } from 'react-i18next';
-import { StyleSheet, View, Keyboard, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
+import { StyleSheet, View, Keyboard, TouchableWithoutFeedback } from 'react-native';
 import { navigator } from 'libs/navigation';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { height } from 'libs/dimensions';
 import DualFooterButtons from 'ui/components/DualFooterButtons';
 import AnimatedComponent from 'ui/components/AnimatedComponent';
 import Header from 'ui/components/Header';
-import { leaveNavigationBreadcrumb } from 'libs/bugsnag';
 import SeedVaultExportComponent from 'ui/components/SeedVaultExportComponent';
+import { leaveNavigationBreadcrumb } from 'libs/bugsnag';
 import { isAndroid } from 'libs/device';
+import { height } from 'libs/dimensions';
 
 const styles = StyleSheet.create({
     container: {
@@ -90,53 +90,49 @@ class SeedVaultBackup extends Component {
 
         return (
             <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-                <View style={[styles.container, { backgroundColor: body.bg }]}>
-                    <View>
-                        <View style={styles.topContainer}>
-                            <AnimatedComponent
-                                animationInType={['slideInRight', 'fadeIn']}
-                                animationOutType={['slideOutLeft', 'fadeOut']}
-                                delay={400}
-                            >
-                                <Header textColor={body.color}>{t('exportSeedVault')}</Header>
-                            </AnimatedComponent>
-                        </View>
-                        <KeyboardAvoidingView behavior="padding" style={styles.midContainer}>
-                            <View style={{ flex: 0.2 }} />
-                            <AnimatedComponent
-                                animationInType={['slideInRight', 'fadeIn']}
-                                animationOutType={['slideOutLeft', 'fadeOut']}
-                                delay={200}
-                            >
-                                <SeedVaultExportComponent
-                                    step={step}
-                                    setProgressStep={(step) => this.setState({ step })}
-                                    goBack={() => this.goBack()}
-                                    onRef={(ref) => {
-                                        this.SeedVaultExportComponent = ref;
-                                    }}
-                                    isAuthenticated
-                                    seed={seed}
-                                    setSeed={(seed) => this.setState({ seed })}
-                                />
-                            </AnimatedComponent>
-                        </KeyboardAvoidingView>
-                        <View style={styles.bottomContainer}>
-                            <AnimatedComponent animationInType={['fadeIn']} animationOutType={['fadeOut']} delay={0}>
-                                <DualFooterButtons
-                                    onLeftButtonPress={() => this.SeedVaultExportComponent.onBackPress()}
-                                    onRightButtonPress={() => this.onRightButtonPress()}
-                                    leftButtonText={t('global:back')}
-                                    rightButtonText={
-                                        step === 'isExporting' && !isAndroid
-                                            ? t('global:export')
-                                            : step === 'isSelectingSaveMethodAndroid'
-                                                ? t('global:done')
-                                                : t('global:next')
-                                    }
-                                />
-                            </AnimatedComponent>
-                        </View>
+                <View style={styles.container}>
+                    <View style={styles.topContainer}>
+                        <AnimatedComponent
+                            animationInType={['slideInRight', 'fadeIn']}
+                            animationOutType={['slideOutLeft', 'fadeOut']}
+                            delay={400}
+                        >
+                            <Header textColor={body.color}>{t('exportSeedVault')}</Header>
+                        </AnimatedComponent>
+                    </View>
+                    <View style={styles.midContainer}>
+                        <View style={{ flex: 0.2 }} />
+                        <AnimatedComponent
+                            animationInType={['slideInRight', 'fadeIn']}
+                            animationOutType={['slideOutLeft', 'fadeOut']}
+                            delay={200}
+                        >
+                            <SeedVaultExportComponent
+                                step={step}
+                                setProgressStep={(step) => this.setState({ step })}
+                                goBack={() => this.goBack()}
+                                onRef={(ref) => {
+                                    this.SeedVaultExportComponent = ref;
+                                }}
+                                isAuthenticated
+                                seed={seed}
+                                setSeed={(seed) => this.setState({ seed })}
+                            />
+                        </AnimatedComponent>
+                    </View>
+                    <View style={styles.bottomContainer}>
+                        <AnimatedComponent animationInType={['fadeIn']} animationOutType={['fadeOut']} delay={0}>
+                            <DualFooterButtons
+                                onLeftButtonPress={() => this.SeedVaultExportComponent.onBackPress()}
+                                onRightButtonPress={() => this.onRightButtonPress()}
+                                leftButtonText={t('global:back')}
+                                rightButtonText={
+                                    step === 'isExporting' && !isAndroid
+                                        ? t('global:export')
+                                        : step === 'isSelectingSaveMethodAndroid' ? t('global:done') : t('global:next')
+                                }
+                            />
+                        </AnimatedComponent>
                     </View>
                 </View>
             </TouchableWithoutFeedback>

diff --git a/src/mobile/src/ui/views/onboarding/SetPassword.js b/src/mobile/src/ui/views/onboarding/SetPassword.js
@@ -4,7 +4,6 @@ import { withNamespaces } from 'react-i18next';
 import { StyleSheet, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { navigator } from 'libs/navigation';
 import { connect } from 'react-redux';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { setOnboardingComplete } from 'shared-modules/actions/accounts';
 import { clearWalletData, clearSeed, setPassword } from 'shared-modules/actions/wallet';
 import { generateAlert } from 'shared-modules/actions/alerts';
@@ -18,7 +17,6 @@ import InfoBox from 'ui/components/InfoBox';
 import { Styling } from 'ui/theme/general';
 import Header from 'ui/components/Header';
 import PasswordFields from 'ui/components/PasswordFields';
-import { isIPhoneX } from 'libs/device';
 import { leaveNavigationBreadcrumb } from 'libs/bugsnag';
 
 console.ignoredYellowBox = ['Native TextInput']; // eslint-disable-line no-console
@@ -178,68 +176,61 @@ class SetPassword extends Component {
         const { password, reentry } = this.state;
 
         return (
-            <KeyboardAwareScrollView
-                contentContainerStyle={styles.container}
-                resetScrollToCoords={{ x: 0, y: 0 }}
-                scrollEnabled={false}
-                extraHeight={isIPhoneX ? 150 : 0}
-            >
-                <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-                    <View style={[styles.container, { backgroundColor: body.bg }]}>
-                        <View style={styles.topContainer}>
-                            <AnimatedComponent
-                                animationInType={['slideInRight', 'fadeIn']}
-                                animationOutType={['slideOutLeft', 'fadeOut']}
-                                delay={400}
-                            >
-                                <Header textColor={body.color}>{t('choosePassword')}</Header>
-                            </AnimatedComponent>
-                        </View>
-                        <View style={styles.midContainer}>
-                            <AnimatedComponent
-                                animationInType={['slideInRight', 'fadeIn']}
-                                animationOutType={['slideOutLeft', 'fadeOut']}
-                                delay={266}
-                            >
-                                <InfoBox>
-                                    <Text style={[styles.infoText, { color: body.color }]}>{t('anEncryptedCopy')}</Text>
-                                    <Text style={[styles.warningText, { color: body.color }]}>
-                                        {t('changePassword:ensureStrongPassword')}
-                                    </Text>
-                                </InfoBox>
-                            </AnimatedComponent>
-                            <View style={{ flex: 0.2 }} />
-                            <AnimatedComponent
-                                animationInType={['slideInRight', 'fadeIn']}
-                                animationOutType={['slideOutLeft', 'fadeOut']}
-                                delay={266}
-                            >
-                                <PasswordFields
-                                    onRef={(ref) => {
-                                        this.passwordFields = ref;
-                                    }}
-                                    onAcceptPassword={() => this.onAcceptPassword()}
-                                    password={password}
-                                    reentry={reentry}
-                                    setPassword={(password) => this.setState({ password })}
-                                    setReentry={(reentry) => this.setState({ reentry })}
-                                />
-                            </AnimatedComponent>
-                            <View style={{ flex: 0.35 }} />
-                        </View>
-                        <View style={styles.bottomContainer}>
-                            <AnimatedComponent animationInType={['fadeIn']} animationOutType={['fadeOut']} delay={0}>
-                                <DualFooterButtons
-                                    onLeftButtonPress={() => this.onBackPress()}
-                                    onRightButtonPress={() => this.onDonePress()}
-                                    leftButtonText={t('global:goBack')}
-                                    rightButtonText={t('global:done')}
-                                />
-                            </AnimatedComponent>
-                        </View>
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+                <View style={[styles.container, { backgroundColor: body.bg }]}>
+                    <View style={styles.topContainer}>
+                        <AnimatedComponent
+                            animationInType={['slideInRight', 'fadeIn']}
+                            animationOutType={['slideOutLeft', 'fadeOut']}
+                            delay={400}
+                        >
+                            <Header textColor={body.color}>{t('choosePassword')}</Header>
+                        </AnimatedComponent>
                     </View>
-                </TouchableWithoutFeedback>
-            </KeyboardAwareScrollView>
+                    <View style={styles.midContainer}>
+                        <AnimatedComponent
+                            animationInType={['slideInRight', 'fadeIn']}
+                            animationOutType={['slideOutLeft', 'fadeOut']}
+                            delay={266}
+                        >
+                            <InfoBox>
+                                <Text style={[styles.infoText, { color: body.color }]}>{t('anEncryptedCopy')}</Text>
+                                <Text style={[styles.warningText, { color: body.color }]}>
+                                    {t('changePassword:ensureStrongPassword')}
+                                </Text>
+                            </InfoBox>
+                        </AnimatedComponent>
+                        <View style={{ flex: 0.2 }} />
+                        <AnimatedComponent
+                            animationInType={['slideInRight', 'fadeIn']}
+                            animationOutType={['slideOutLeft', 'fadeOut']}
+                            delay={266}
+                        >
+                            <PasswordFields
+                                onRef={(ref) => {
+                                    this.passwordFields = ref;
+                                }}
+                                onAcceptPassword={() => this.onAcceptPassword()}
+                                password={password}
+                                reentry={reentry}
+                                setPassword={(password) => this.setState({ password })}
+                                setReentry={(reentry) => this.setState({ reentry })}
+                            />
+                        </AnimatedComponent>
+                        <View style={{ flex: 0.35 }} />
+                    </View>
+                    <View style={styles.bottomContainer}>
+                        <AnimatedComponent animationInType={['fadeIn']} animationOutType={['fadeOut']} delay={0}>
+                            <DualFooterButtons
+                                onLeftButtonPress={() => this.onBackPress()}
+                                onRightButtonPress={() => this.onDonePress()}
+                                leftButtonText={t('global:goBack')}
+                                rightButtonText={t('global:done')}
+                            />
+                        </AnimatedComponent>
+                    </View>
+                </View>
+            </TouchableWithoutFeedback>
         );
     }
 }

diff --git a/src/mobile/src/ui/views/wallet/Home.js b/src/mobile/src/ui/views/wallet/Home.js
@@ -117,7 +117,7 @@ class Home extends Component {
     }
 
     componentWillReceiveProps(newProps) {
-        if (!this.props.isKeyboardActive && newProps.isKeyboardActive) {
+        if (!this.props.isKeyboardActive && newProps.isKeyboardActive && !this.props.isModalActive) {
             this.handleCloseTopBar();
             if (isAndroid) {
                 this.topBarHeight = 20;