Skip to content
This repository has been archived by the owner on Jun 7, 2023. It is now read-only.

Mobile: Fix keyboard avoidance globally #767

Merged
merged 2 commits into from
Dec 10, 2018
Merged

Mobile: Fix keyboard avoidance globally #767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f4e91a
Mobile: Fix global keyboard avoidance
cvarley100 Dec 10, 2018
abf176c
Mobile: Remove unused method
cvarley100 Dec 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/mobile/android/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions src/mobile/android/settings.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
24 changes: 19 additions & 5 deletions src/mobile/src/ui/components/KeyboardMonitor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -14,6 +16,7 @@ const mapStateToProps = (state) => ({
isKeyboardActive: state.ui.isKeyboardActive,
inactive: state.ui.inactive,
minimised: state.ui.minimised,
isModalActive: state.ui.isModalActive,
});

/**
Expand All @@ -32,6 +35,8 @@ export default function withKeyboardMonitor(C) {
inactive: PropTypes.bool.isRequired,
/** @ignore */
minimised: PropTypes.bool.isRequired,
/** @ignore */
isModalActive: PropTypes.bool.isRequired,
};

componentWillMount() {
Expand All @@ -47,7 +52,6 @@ export default function withKeyboardMonitor(C) {
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
timer.clearTimeout('iOSKeyboardTimeout');
}

keyboardWillShow = () => {
Expand All @@ -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 = () => {
Expand All @@ -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>
);
}
}

Expand Down
10 changes: 8 additions & 2 deletions src/mobile/src/ui/components/ModalView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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() }]}
>
Expand All @@ -113,7 +119,7 @@ export class ModalViewComponent extends PureComponent {
/>
)) || <SingleFooterButton onButtonPress={() => onButtonPress()} buttonText={buttonText} />}
</SafeAreaView>
</View>
</KeyboardAwareScrollView>
);
}
}
Expand Down
96 changes: 46 additions & 50 deletions src/mobile/src/ui/views/onboarding/SeedVaultBackup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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>
Expand Down
117 changes: 54 additions & 63 deletions src/mobile/src/ui/views/onboarding/SetPassword.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/mobile/src/ui/views/wallet/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading