From 9397c9bd235b1024d212b97976b1a6ea7cc9acba Mon Sep 17 00:00:00 2001 From: dangkhoa Date: Mon, 27 Aug 2018 14:15:42 +0700 Subject: [PATCH] fix ui android when animating with keyboard (small screen) --- .../screen/AddAddressBookScreen.js | 90 ++++++++++--------- app/modules/ScanQRCode/index.js | 13 +-- .../Setting/screen/ExportPrivateKeyScreen.js | 2 +- .../screen/ImportViaAddressScreen.js | 29 +++--- .../screen/ImportViaPrivateKeyScreen.js | 31 ++++--- 5 files changed, 91 insertions(+), 74 deletions(-) diff --git a/app/modules/AddressBook/screen/AddAddressBookScreen.js b/app/modules/AddressBook/screen/AddAddressBookScreen.js index 10f1dcaf..5fc2c1ec 100644 --- a/app/modules/AddressBook/screen/AddAddressBookScreen.js +++ b/app/modules/AddressBook/screen/AddAddressBookScreen.js @@ -3,13 +3,14 @@ import React, { Component } from 'react' import { View, TouchableWithoutFeedback, - Dimensions, + // Dimensions, Text, Keyboard, Animated, StyleSheet, SafeAreaView, - Platform + Platform, + StatusBar } from 'react-native' import PropsType from 'prop-types' import { observer } from 'mobx-react/native' @@ -26,7 +27,8 @@ import Checker from '../../../Handler/Checker' import AddressBookStore from '../AddressBookStore' const marginTop = LayoutUtils.getExtraTop() -const { height } = Dimensions.get('window') +// const { height } = Dimensions.get('window') +const statusBarHeight = Platform.OS == 'ios' ? 20 : StatusBar.currentHeight @observer export default class AddAddressBookScreen extends Component { @@ -44,7 +46,8 @@ export default class AddAddressBookScreen extends Component { this.addressBookStore = new AddressBookStore() this.state = { isNameFocus: false, - isAddressFocus: false + isAddressFocus: false, + showHeader: true } } @@ -80,22 +83,27 @@ export default class AddAddressBookScreen extends Component { } _runTraslateTop(toValue) { - Animated.timing(this.traslateTop, { - toValue, - duration: 180 - }).start() + Animated.timing( + // Animate value over time + this.traslateTop, // The value to drive + { + toValue: -toValue, // Animate to final value of 1 + duration: 250, + useNativeDriver: true + } + ).start() } _keyboardDidShow(e) { - if (height <= 568) { - this._runTraslateTop(-80) + if (e.endCoordinates.screenY < 437 + marginTop + 60) { + this._runTraslateTop(437 + marginTop - e.endCoordinates.screenY - (Platform.OS == 'ios' ? 0 : 20)) + this.setState({ showHeader: false }) } } _keyboardDidHide() { - if (height <= 568) { - this._runTraslateTop(0) - } + this.setState({ showHeader: true }) + this._runTraslateTop(0) } returnData(codeScanned) { @@ -117,7 +125,7 @@ export default class AddAddressBookScreen extends Component { _renderNameField = (isNameFocus) => { const { title, isErrorTitle } = this.addressBookStore return ( - + { Keyboard.dismiss() }} > - - { - navigation.goBack() - }} - /> - {this._renderNameField(isNameFocus)} - {this._renderAddressField(isAddressFocus)} - {this._scanQRCodeButton()} + + + {this.state.showHeader && { + navigation.goBack() + }} + />} + {this._renderNameField(isNameFocus)} + {this._renderAddressField(isAddressFocus)} + {this._scanQRCodeButton()} + {this._renderSaveButton()} - + ) diff --git a/app/modules/ScanQRCode/index.js b/app/modules/ScanQRCode/index.js index c4901d4d..c425ca44 100644 --- a/app/modules/ScanQRCode/index.js +++ b/app/modules/ScanQRCode/index.js @@ -23,13 +23,14 @@ import HapticHandler from '../../Handler/HapticHandler' import LayoutUtils from '../../commons/LayoutUtils' import { isIphoneX } from '../../../node_modules/react-native-iphone-x-helper' -const { width } = Dimensions.get('window') +const { width, height } = Dimensions.get('window') // const widthButton = (width - 60) / 2 const heightBottomView = (width * 65) / 375 const marginTop = LayoutUtils.getExtraTop() -const heightCamera = (width * 591) / 375 -const a = (width * 177) / 375 -const ratio = a / heightCamera +const bottomPadding = isIphoneX() ? 33 : 0 +const topPadding = isIphoneX() ? 64 : marginTop + 20 +const heightCamera = height - heightBottomView - topPadding - bottomPadding +const ratio = 0.3 @observer export default class ScanQRCodeScreen extends PureComponent { static propTypes = { @@ -279,7 +280,7 @@ export default class ScanQRCodeScreen extends PureComponent { render() { const triggerRender = NavStore.triggerRenderAndroid return ( - + Automatically scan the QR code into the frame diff --git a/app/modules/Setting/screen/ExportPrivateKeyScreen.js b/app/modules/Setting/screen/ExportPrivateKeyScreen.js index 54eabdf1..6890952d 100644 --- a/app/modules/Setting/screen/ExportPrivateKeyScreen.js +++ b/app/modules/Setting/screen/ExportPrivateKeyScreen.js @@ -105,7 +105,7 @@ const styles = StyleSheet.create({ marginTop: 10, fontSize: 14, fontFamily: Platform.OS === 'ios' ? 'Courier New' : 'CourierNewBold', - fontWeight: Platform.OS === 'ios' ? 'bold' : '', + fontWeight: Platform.OS === 'ios' ? 'bold' : 'normal', color: '#8A8D97', textAlign: 'center', marginLeft: 18, diff --git a/app/modules/WalletImport/screen/ImportViaAddressScreen.js b/app/modules/WalletImport/screen/ImportViaAddressScreen.js index c7cf8e75..772dd8c5 100644 --- a/app/modules/WalletImport/screen/ImportViaAddressScreen.js +++ b/app/modules/WalletImport/screen/ImportViaAddressScreen.js @@ -8,7 +8,8 @@ import { Keyboard, Animated, TouchableWithoutFeedback, - SafeAreaView + SafeAreaView, + StatusBar } from 'react-native' import PropTypes from 'prop-types' import { observer } from 'mobx-react/native' @@ -28,6 +29,7 @@ import ImportAddressStore from '../stores/ImportAddressStore' const { width } = Dimensions.get('window') const marginTop = LayoutUtils.getExtraTop() +const statusBarHeight = Platform.OS == 'ios' ? 20 : StatusBar.currentHeight @observer export default class ImportViaAddressScreen extends Component { static propTypes = { @@ -44,7 +46,8 @@ export default class ImportViaAddressScreen extends Component { this.importAddressStore = new ImportAddressStore() this.state = { isNameFocus: false, - isAddressFocus: false + isAddressFocus: false, + showHeader: true } } @@ -105,12 +108,14 @@ export default class ImportViaAddressScreen extends Component { } _keyboardDidShow(e) { - if (e.endCoordinates.screenY < 437 + marginTop) { - this._runExtraHeight(437 + marginTop - e.endCoordinates.screenY) + if (e.endCoordinates.screenY < 437 + marginTop + 60) { + this._runExtraHeight(437 + marginTop - e.endCoordinates.screenY - (Platform.OS == 'ios' ? 0 : 20)) + this.setState({ showHeader: false }) } } _keyboardDidHide(e) { + this.setState({ showHeader: true }) this._runExtraHeight(0) } @@ -163,7 +168,7 @@ export default class ImportViaAddressScreen extends Component { ] }]} > - - Name + />} + Name { this.nameField = ref }} style={{ width: width - 40, marginTop: 10 }} @@ -182,9 +187,9 @@ export default class ImportViaAddressScreen extends Component { onChangeText={this.onChangeName} /> {isErrorTitle && - {constant.EXISTED_NAME} + {constant.EXISTED_NAME} } - Address + Address { this.addressField = ref }} style={{ width: width - 40, marginTop: 10 }} @@ -196,7 +201,7 @@ export default class ImportViaAddressScreen extends Component { onBlur={() => this.setState({ isAddressFocus: false })} /> {errorAddress !== '' && - {errorAddress} + {errorAddress} } - { navigation.goBack() }} - /> - Name + />} + Name { this.nameField = ref }} style={{ width: width - 40, marginTop: 10 }} @@ -203,9 +208,9 @@ export default class ImportViaPrivateKeyScreen extends Component { onChangeText={this.onChangeName} /> {isErrorTitle && - {constant.EXISTED_NAME} + {constant.EXISTED_NAME} } - Private Key + Private Key { this.privKeyField = ref }} style={{ width: width - 40, marginTop: 10 }} @@ -217,7 +222,7 @@ export default class ImportViaPrivateKeyScreen extends Component { onBlur={() => this.setState({ isPrivateKeyFocus: false })} /> {isErrorPrivateKey && - {constant.INVALID_PRIVATE_KEY} + {constant.INVALID_PRIVATE_KEY} } - + ) } } @@ -259,15 +264,13 @@ const styles = StyleSheet.create({ fontSize: 16, fontFamily: 'OpenSans-Semibold', color: 'white', - alignSelf: 'flex-start', - marginLeft: 20 + alignSelf: 'flex-start' }, errorText: { fontSize: 14, fontFamily: 'OpenSans-Semibold', color: AppStyle.errorColor, alignSelf: 'flex-start', - marginLeft: 20, marginTop: 10 } })