fix ui android when animating with keyboard (small screen)

Slackboi · Aug 27, 2018 · 9397c9b · 9397c9b
1 parent 003518f
commit 9397c9b
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 74 deletions.
diff --git 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 (
-      <View style={{ marginTop: 15, marginHorizontal: 20 }}>
+      <View style={{ marginTop: this.state.showHeader ? 15 : 50 + statusBarHeight, marginHorizontal: 20 }}>
         <Text style={{
           fontSize: 16,
           fontFamily: AppStyle.mainFontSemiBold,
@@ -210,33 +218,35 @@ export default class AddAddressBookScreen extends Component {
     return (
       <SafeAreaView style={{ flex: 1 }}>
         <TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => { Keyboard.dismiss() }} >
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                transform: [
-                  {
-                    translateY: traslateTop
-                  }]
-              }
-            ]}
-          >
-            <NavigationHeader
-              style={{ marginTop: 20 + marginTop }}
-              headerItem={{
-                title: 'Add New Address',
-                icon: null,
-                button: images.backButton
-              }}
-              action={() => {
-                navigation.goBack()
-              }}
-            />
-            {this._renderNameField(isNameFocus)}
-            {this._renderAddressField(isAddressFocus)}
-            {this._scanQRCodeButton()}
+          <View style={styles.container}>
+            <Animated.View
+              style={[
+                styles.container,
+                {
+                  transform: [
+                    {
+                      translateY: traslateTop
+                    }]
+                }
+              ]}
+            >
+              {this.state.showHeader && <NavigationHeader
+                style={{ marginTop: 20 + marginTop }}
+                headerItem={{
+                  title: 'Add New Address',
+                  icon: null,
+                  button: images.backButton
+                }}
+                action={() => {
+                  navigation.goBack()
+                }}
+              />}
+              {this._renderNameField(isNameFocus)}
+              {this._renderAddressField(isAddressFocus)}
+              {this._scanQRCodeButton()}
+            </Animated.View>
             {this._renderSaveButton()}
-          </Animated.View>
+          </View>
         </TouchableWithoutFeedback>
       </SafeAreaView>
     )

diff --git 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 (
-      <View style={{ flex: 1, paddingTop: isIphoneX() ? 64 : marginTop + 20, paddingBottom: isIphoneX() ? 33 : 0 }}>
+      <View style={{ flex: 1, paddingTop: topPadding, paddingBottom: bottomPadding }}>
         <NavigationHeader
           headerItem={{
             title: 'Scan QR Code',
@@ -322,7 +323,7 @@ export default class ScanQRCodeScreen extends PureComponent {
               <Text
                 style={[styles.description, {
                   position: 'absolute',
-                  bottom: ratio * heightCamera - (isIphoneX() ? 25 : 40)
+                  bottom: ratio * heightCamera - (isIphoneX() ? 20 : 30)
                 }]}
               >
                 Automatically scan the QR code into the frame

diff --git 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
@@ -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,16 +168,16 @@ export default class ImportViaAddressScreen extends Component {
               ]
             }]}
             >
-              <NavigationHeader
+              {this.state.showHeader && <NavigationHeader
                 style={{ marginTop: marginTop + 20, width }}
                 headerItem={{
                   title: 'Add Address',
                   icon: null,
                   button: images.backButton
                 }}
                 action={this.goBack}
-              />
-              <Text style={[styles.titleText, { marginTop: 15 }, { color: isNameFocus ? AppStyle.mainColor : 'white' }]}>Name</Text>
+              />}
+              <Text style={[styles.titleText, { marginTop: this.state.showHeader ? 15 : 50 + statusBarHeight, marginLeft: this.state.showHeader ? 20 : 0, color: isNameFocus ? AppStyle.mainColor : 'white' }]}>Name</Text>
               <InputWithAction
                 ref={(ref) => { this.nameField = ref }}
                 style={{ width: width - 40, marginTop: 10 }}
@@ -182,9 +187,9 @@ export default class ImportViaAddressScreen extends Component {
                 onChangeText={this.onChangeName}
               />
               {isErrorTitle &&
-                <Text style={styles.errorText}>{constant.EXISTED_NAME}</Text>
+                <Text style={[styles.errorText, { marginLeft: this.state.showHeader ? 20 : 0 }]}>{constant.EXISTED_NAME}</Text>
               }
-              <Text style={[styles.titleText, { marginTop: 20 }, { color: isAddressFocus ? AppStyle.mainColor : 'white' }]}>Address</Text>
+              <Text style={[styles.titleText, { marginTop: 20, marginLeft: this.state.showHeader ? 20 : 0, color: isAddressFocus ? AppStyle.mainColor : 'white' }]}>Address</Text>
               <InputWithAction
                 ref={(ref) => { 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 !== '' &&
-                <Text style={styles.errorText}>{errorAddress}</Text>
+                <Text style={[styles.errorText, { marginLeft: this.state.showHeader ? 20 : 0 }]}>{errorAddress}</Text>
               }
               <ActionButton
                 style={{ height: 40, marginTop: 30 }}
@@ -233,15 +238,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
   }
 })