update moment

src/Screens/MethodPay/MethodPayDetail.js

@@ -7,6 +7,10 @@ import {
   Dimensions,
   TouchableOpacity,
   Alert,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Platform,
 } from 'react-native';
 import {connect} from 'react-redux';
 import R from '../../assets/R';
@@ -90,53 +94,64 @@ const MethodPayDetail = (props) => {
   };
 
   return (
-    <View style={{flex: 1}}>
-      <HeaderBack title={'Chi tiết phương thức'} />
-      <View style={styles.container}>
-        <BankInfor
-          linkImg={params.bank.logo}
-          title={'Chọn ngân hàng'}
-          value={params.bank.name}
-        />
-        <TextField
-          onChangeText={(val) => setBankName(val)}
-          title={'Chi nhánh'}
-          value={branch_name}
-        />
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1}}
+      keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={{flex: 1}}>
+          <HeaderBack title={'Chi tiết phương thức'} />
+          <View style={{flex: 1}}>
+            <View style={styles.container}>
+              <BankInfor
+                linkImg={params.bank.logo}
+                title={'Chọn ngân hàng'}
+                value={params.bank.name}
+              />
+              <TextField
+                onChangeText={(val) => setBankName(val)}
+                title={'Chi nhánh'}
+                value={branch_name}
+              />
 
-        <TextField
-          onChangeText={(val) => setAccountName(val)}
-          title={'Tên chủ tài khoản'}
-          value={account_name}
-        />
-        <TextField
-          onChangeText={(val) => setAccountNo(val)}
-          title={'Số tài khoản ngân hàng'}
-          isNumber={true}
-          value={account_no}
-        />
-      </View>
-      <TouchableOpacity onPress={onUpdate} style={styles.btnLeft}>
-        <Text style={styles.txtAdd}>Cập nhật</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => {
-          Alert.alert(
-            'Thông báo!',
-            'Bạn có chắc chắn muốn xoá phương thức thanh toán',
-            [
-              {
-                text: 'Từ chối',
-                style: 'cancel',
-              },
-              {text: 'Đồng ý', onPress: () => onRemove()},
-            ],
-          );
-        }}
-        style={styles.btnRight}>
-        <Text style={styles.txtAdd}>Xoá</Text>
-      </TouchableOpacity>
-    </View>
+              <TextField
+                onChangeText={(val) => setAccountName(val)}
+                title={'Tên chủ tài khoản'}
+                value={account_name}
+              />
+              <TextField
+                onChangeText={(val) => setAccountNo(val)}
+                title={'Số tài khoản ngân hàng'}
+                isNumber={true}
+                value={account_no}
+              />
+            </View>
+          </View>
+          <View style={styles.footer}>
+            <TouchableOpacity onPress={onUpdate} style={styles.btnLeft}>
+              <Text style={styles.txtAdd}>Cập nhật</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => {
+                Alert.alert(
+                  'Thông báo!',
+                  'Bạn có chắc chắn muốn xoá phương thức thanh toán',
+                  [
+                    {
+                      text: 'Từ chối',
+                      style: 'cancel',
+                    },
+                    {text: 'Đồng ý', onPress: () => onRemove()},
+                  ],
+                );
+              }}
+              style={styles.btnRight}>
+              <Text style={styles.txtAdd}>Xoá</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
   );
 };
 
@@ -145,6 +160,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingTop: 10,
   },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+    paddingHorizontal: 20,
+  },
   btnLeft: {
     width: 150,
     height: 40,
@@ -152,9 +174,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: R.colors.main,
     borderRadius: 5,
-    position: 'absolute',
-    bottom: 30,
-    left: 20,
   },
   btnRight: {
     width: 150,
@@ -163,9 +182,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: R.colors.main,
     borderRadius: 5,
-    position: 'absolute',
-    bottom: 30,
-    right: 20,
   },
   txtAdd: {
     color: R.colors.white,