fix keyboard

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -10,6 +10,8 @@ import {
   Platform,
   Dimensions,
   Alert,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import TextField from '../../../components/Input/TextField';
 import TextMulti from '../../../components/Input/TextMulti';
@@ -120,6 +122,7 @@ const BankInfor = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView showsVerticalScrollIndicator={false}>
           <View
             style={{
@@ -157,6 +160,7 @@ const BankInfor = (props) => {
             </View>
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/AccountVerification/Tab/GeneralInfor.js

@@ -9,6 +9,8 @@ import {
   KeyboardAvoidingView,
   ScrollView,
   Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import R from '../../../assets/R';
 import moment from 'moment';
@@ -47,6 +49,7 @@ const GeneralInfor = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView showsVerticalScrollIndicator={false}>
           <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
             <View style={{flexDirection: 'row'}}>
@@ -77,7 +80,10 @@ const GeneralInfor = (props) => {
               title={'Ngày sinh'}
             />
 
-          <TextMulti title={'Địa chỉ'} onChangeText={(val) => setAdress(val)} />
+            <TextMulti
+              title={'Địa chỉ'}
+              onChangeText={(val) => setAdress(val)}
+            />
             <TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
               <Image
                 style={{width: 30, height: 30}}
@@ -87,6 +93,7 @@ const GeneralInfor = (props) => {
             <View style={{height: 100}} />
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/AccountVerification/Tab/Profile.js

@@ -153,6 +153,7 @@ const Profile = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
           <View
             style={{
@@ -210,6 +211,7 @@ const Profile = (props) => {
         <View style={styles.btnSend}>
           <Button title={'Xác minh'} onClick={onPress} />
         </View>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/AccountVerification/TabView/GeneralView.js

@@ -9,6 +9,8 @@ import {
   KeyboardAvoidingView,
   ScrollView,
   Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import R from '../../../assets/R';
 import moment from 'moment';
@@ -33,6 +35,7 @@ const GeneralInfor = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView showsVerticalScrollIndicator={false}>
           <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
             <View
@@ -91,6 +94,7 @@ const GeneralInfor = (props) => {
             <View style={{height: 100}} />
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/AccountVerification/TabView/ProfileView.js

@@ -10,6 +10,8 @@ import {
   ScrollView,
   Platform,
   Dimensions,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import Button from '../../../components/Button';
 import PickerImgUni from '../../../components/Picker/PickerImgUni';
@@ -58,6 +60,7 @@ const Profile = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
           <View
             style={{
@@ -90,6 +93,7 @@ const Profile = (props) => {
             </View>
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/Authen/Authen.js

@@ -6,6 +6,8 @@ import {
   Platform,
   SafeAreaView,
   StatusBar,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import HeaderAuthen from '../../components/Header/HeaderAuthen';
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
@@ -21,6 +23,7 @@ const Authen = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1, backgroundColor: 'white'}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView showsVerticalScrollIndicator={false}>
           <View style={{flex: 1}}>
             <HeaderAuthen />
@@ -50,6 +53,7 @@ const Authen = (props) => {
             </View>
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/Feedback/FeedbackView.js

@@ -10,6 +10,8 @@ import {
   TouchableOpacity,
   ImageBackground,
   ScrollView,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
 import RadioForm, {
@@ -58,6 +60,7 @@ const FeedbackView = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
           <HeaderBack isWhite={true} title={'GỬI FEEDBACK'} />
           <View style={styles.container}>
@@ -144,9 +147,13 @@ const FeedbackView = (props) => {
           </View>
 
           <View style={styles.containerBtn}>
-          <Button onClick={() => console.log('hello')} title={'Gửi feedback'} />
+            <Button
+              onClick={() => console.log('hello')}
+              title={'Gửi feedback'}
+            />
           </View>
         </View>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/Menu/Profile/Tab/GeneralInfor.js

@@ -11,6 +11,8 @@ import {
   KeyboardAvoidingView,
   ScrollView,
   Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import R from '../../../../assets/R';
 import RadioForm, {
@@ -49,6 +51,7 @@ const GeneralInfor = (props) => {
       behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
       style={{flex: 1}}
       keyboardVerticalOffset={-500}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
           <View style={styles.container}>
             <TextField
@@ -118,6 +121,7 @@ const GeneralInfor = (props) => {
             </View>
           </View>
         </ScrollView>
+      </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
   );
 };

src/Screens/MethodPay/AddMethod.js

@@ -7,6 +7,11 @@ import {
   Dimensions,
   TouchableOpacity,
   Alert,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
 } from 'react-native';
 import {connect} from 'react-redux';
 import R from '../../assets/R';
@@ -85,9 +90,15 @@ const AddMethodPay = (props) => {
   };
 
   return (
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1}}
+      keyboardVerticalOffset={-50}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
           <HeaderBack title={'Thêm phương thức thanh toán'} />
           <View style={styles.container}>
+            <View style={{flex: 1}}>
               <Text style={styles.txtTitle}>Chọn ngân hàng </Text>
               <PickerItem
                 value={bank_id}
@@ -111,17 +122,23 @@ const AddMethodPay = (props) => {
                 isNumber={true}
               />
             </View>
+            <View style={{justifyContent: 'center', alignItems: 'center'}}>
               <TouchableOpacity onPress={onLick} style={styles.btn}>
                 <Text style={styles.txtAdd}>Thêm</Text>
               </TouchableOpacity>
             </View>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 10,
     paddingTop: 10,
+    flex: 1,
   },
 
   btn: {
@@ -131,9 +148,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: R.colors.main,
     borderRadius: 5,
-    position: 'absolute',
-    bottom: 30,
-    right: width / 2 - 150 / 2,
+    marginBottom: 10,
   },
   txtAdd: {
     color: R.colors.white,

src/Screens/MethodPay/MethodPay.js

@@ -6,22 +6,22 @@ import {useNavigation} from '@react-navigation/native';
 
 const MethodPay = (props) => {
   const [data, setData] = useState([]);
-  const [isRefresh, setRefresh] = useState(true);
-
-  const navigation = useNavigation();
+  const [isRefresh, setRefresh] = useState(false);
 
   useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
     getData();
-    });
+  }, []);
 
-    return unsubscribe;
-  }, [navigation]);
+  const onRefresh = () => {
+    getData();
+  };
 
   const getData = async () => {
+    setRefresh(true);
     const res = await getListWidthDraw({
       platform: Platform.OS,
     });
+    setRefresh(false);
     if (res.data.code == 200 && res.data.data) {
       setData(res.data.data);
     } else {
@@ -29,7 +29,13 @@ const MethodPay = (props) => {
     }
   };
 
-  return <MethodPayView listMethod={data} />;
+  return (
+    <MethodPayView
+      onRefresh={onRefresh}
+      listMethod={data}
+      isRefresh={isRefresh}
+    />
+  );
 };
 
 export default MethodPay;

src/Screens/MethodPay/MethodPayDetail.js

@@ -39,7 +39,6 @@ const MethodPayDetail = (props) => {
   const onUpdate = async () => {
     const titles = ['chi nhánh', 'chủ tài khoản', 'số tài khoản ngân hàng'];
     const index = checkFormatArray([branch_name, account_name, account_no]);
-    console.log('Index', index);
     if (index === true) {
       if (
         branch_name != params.branch_name ||

src/Screens/MethodPay/MethodPayView.js

@@ -11,15 +11,19 @@ import {ADDMETHODPAY} from '../../routers/ScreenNames';
 const MethodPayView = (props) => {
   const navigate = useNavigation();
 
+  const {isRefresh, listMethod, onRefresh} = props;
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'Cài đặt phương thức thanh toán'} />
       <View style={{flex: 1}}>
         <FlatList
-          keyExtractor={(item) => item.id}
+          keyExtractor={(item) => item.method}
           showsVerticalScrollIndicator={false}
+          refreshing={isRefresh}
+          onRefresh={onRefresh}
           onEndReachedThreshold={0.01}
-          data={props.listMethod}
+          data={listMethod}
           renderItem={({item}) => <Item item={item} />}
         />
 

src/components/BankInfor.js

@@ -42,7 +42,9 @@ const TextField = (props) => {
           source={{uri: linkImg}}
           style={{width: 50, height: HEIGHTXD(109), marginRight: 10}}
         />
-        <Text numberOfLines={1}>{value}</Text>
+        <Text style={{flex: 1}} numberOfLines={1}>
+          {value}
+        </Text>
       </View>
     </View>
   );