update code

src/Screens/Transaction/DueDate/DueDate.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {getListNotification} from '../../../apis/Functions/users';
+import DueDateView from './DueDateView';
+import I18n from '../../../helper/i18/i18n';
+
+const DueDate = (props) => {
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+  const [fillter, setFillters] = useState('ALL');
+
+  useEffect(() => {
+    getData();
+  }, [fillter]);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setisRefresh(false);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
 
-const DueDate = () => {
   return (
-    <View>
-      <Text>DueDate view</Text>
-    </View>
+    <DueDateView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFillters={setFillters}
+      fillter={fillter}
+      data={data}
+    />
   );
 };
 

src/Screens/Transaction/DueDate/DueDateView.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import HeaderDrawer from '../../../components/Header/HeaderDrawer';
+import Item from './Item';
+import {getFontXD} from '../../../Config/Functions';
+import AppText from '../../../components/AppText';
+
+const Fillters = [
+  {
+    id: '1',
+    name: 'All',
+    value: 'ALL',
+  },
+  {
+    id: '2',
+    name: 'Deposit',
+    value: 'DEPOSIT',
+  },
+  {
+    id: '3',
+    name: 'Withdraw',
+    value: 'WITHDRAW',
+  },
+  {
+    id: '4',
+    name: 'Transfer',
+    value: 'TRANSFER',
+  },
+];
+
+const EscrowView = (props) => {
+  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {Fillters.map((e) => (
+            <TouchableOpacity
+              key={e.value}
+              onPress={() => setFillters(e.value)}
+              style={[
+                styles.itemFillter,
+                fillter == e.value ? {borderColor: '#1473E6'} : null,
+              ]}>
+              <AppText
+                i18nKey={e.name}
+                style={[
+                  styles.txtFillter,
+                  fillter == e.value ? {color: '#1473E6'} : {},
+                ]}></AppText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {data.length == 0 ? (
+        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+          <AppText
+            i18nKey={'NoData'}
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}></AppText>
+        </View>
+      ) : (
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          refreshing={isRefresh}
+          onRefresh={onRefresh}
+          onEndReachedThreshold={0.01}
+          onEndReached={(info) => {
+            onLoadMore();
+          }}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    paddingVertical: 10,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  itemFillter: {
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#929292',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  txtFillter: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
+});
+
+export default EscrowView;

src/Screens/Transaction/DueDate/Item.js

+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Alert,
+} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <View style={styles.container}>
+      <Block flex={1} row>
+        <View style={styles.wrapLeft} />
+        <View style={styles.wrapDate}>
+          <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+        </View>
+        <Block padding={[5, 10]} space={'between'} flex={1}>
+          <View style={{justifyContent: 'center', flex: 1}}>
+            <Text numberOfLines={2} style={styles.txtBlack}>
+              {item.body}
+            </Text>
+          </View>
+          <Text style={styles.txt}>{item.pushed_at}</Text>
+        </Block>
+      </Block>
+    </View>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+});

src/Screens/Transaction/Escrow/Escrow.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {getListNotification} from '../../../apis/Functions/users';
+import EscrowView from './EscrowView';
+import I18n from '../../../helper/i18/i18n';
+const Escrow = (props) => {
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+  const [fillter, setFillters] = useState('ALL');
+
+  useEffect(() => {
+    getData();
+  }, [fillter]);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setisRefresh(false);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
 
-const Escrow = () => {
   return (
-    <View>
-      <Text>Ecrow view</Text>
-    </View>
+    <EscrowView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFillters={setFillters}
+      fillter={fillter}
+      data={data}
+    />
   );
 };
 

src/Screens/Transaction/Escrow/EscrowView.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import HeaderDrawer from '../../../components/Header/HeaderDrawer';
+import Item from './Item';
+import {getFontXD} from '../../../Config/Functions';
+import AppText from '../../../components/AppText';
+
+const Fillters = [
+  {
+    id: '1',
+    name: 'All',
+    value: 'ALL',
+  },
+  {
+    id: '2',
+    name: 'Deposit',
+    value: 'DEPOSIT',
+  },
+  {
+    id: '3',
+    name: 'Withdraw',
+    value: 'WITHDRAW',
+  },
+  {
+    id: '4',
+    name: 'Transfer',
+    value: 'TRANSFER',
+  },
+];
+
+const EscrowView = (props) => {
+  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {Fillters.map((e) => (
+            <TouchableOpacity
+              key={e.value}
+              onPress={() => setFillters(e.value)}
+              style={[
+                styles.itemFillter,
+                fillter == e.value ? {borderColor: '#1473E6'} : null,
+              ]}>
+              <AppText
+                i18nKey={e.name}
+                style={[
+                  styles.txtFillter,
+                  fillter == e.value ? {color: '#1473E6'} : {},
+                ]}></AppText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {data.length == 0 ? (
+        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+          <AppText
+            i18nKey={'NoData'}
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}></AppText>
+        </View>
+      ) : (
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          refreshing={isRefresh}
+          onRefresh={onRefresh}
+          onEndReachedThreshold={0.01}
+          onEndReached={(info) => {
+            onLoadMore();
+          }}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    paddingVertical: 10,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  itemFillter: {
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#929292',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  txtFillter: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
+});
+
+export default EscrowView;

src/Screens/Transaction/Escrow/Item.js

+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Alert,
+} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <View style={styles.container}>
+      <Block flex={1} row>
+        <View style={styles.wrapLeft} />
+        <View style={styles.wrapDate}>
+          <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+        </View>
+        <Block padding={[5, 10]} space={'between'} flex={1}>
+          <View style={{justifyContent: 'center', flex: 1}}>
+            <Text numberOfLines={2} style={styles.txtBlack}>
+              {item.body}
+            </Text>
+          </View>
+          <Text style={styles.txt}>{item.pushed_at}</Text>
+        </Block>
+      </Block>
+    </View>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+});

src/Screens/Transaction/PriceList/Item.js

+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Alert,
+} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <View style={styles.container}>
+      <Block flex={1} row>
+        <View style={styles.wrapLeft} />
+        <View style={styles.wrapDate}>
+          <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+        </View>
+        <Block padding={[5, 10]} space={'between'} flex={1}>
+          <View style={{justifyContent: 'center', flex: 1}}>
+            <Text numberOfLines={2} style={styles.txtBlack}>
+              {item.body}
+            </Text>
+          </View>
+          <Text style={styles.txt}>{item.pushed_at}</Text>
+        </Block>
+      </Block>
+    </View>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+});

src/Screens/Transaction/PriceList/PriceList.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {getListNotification} from '../../../apis/Functions/users';
+import PriceListView from './PriceListView';
+import I18n from '../../../helper/i18/i18n';
+const PriceList = (props) => {
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+  const [fillter, setFillters] = useState('ALL');
+
+  useEffect(() => {
+    getData();
+  }, [fillter]);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setisRefresh(false);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
 
-const PriceList = () => {
   return (
-    <View>
-      <Text>PriceList view</Text>
-    </View>
+    <PriceListView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFillters={setFillters}
+      fillter={fillter}
+      data={data}
+    />
   );
 };
 

src/Screens/Transaction/PriceList/PriceListView.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import HeaderDrawer from '../../../components/Header/HeaderDrawer';
+import Item from './Item';
+import {getFontXD} from '../../../Config/Functions';
+import AppText from '../../../components/AppText';
+
+const Fillters = [
+  {
+    id: '1',
+    name: 'All',
+    value: 'ALL',
+  },
+  {
+    id: '2',
+    name: 'Deposit',
+    value: 'DEPOSIT',
+  },
+  {
+    id: '3',
+    name: 'Withdraw',
+    value: 'WITHDRAW',
+  },
+  {
+    id: '4',
+    name: 'Transfer',
+    value: 'TRANSFER',
+  },
+];
+
+const NotificaitonView = (props) => {
+  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {Fillters.map((e) => (
+            <TouchableOpacity
+              key={e.value}
+              onPress={() => setFillters(e.value)}
+              style={[
+                styles.itemFillter,
+                fillter == e.value ? {borderColor: '#1473E6'} : null,
+              ]}>
+              <AppText
+                i18nKey={e.name}
+                style={[
+                  styles.txtFillter,
+                  fillter == e.value ? {color: '#1473E6'} : {},
+                ]}></AppText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {data.length == 0 ? (
+        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+          <AppText
+            i18nKey={'NoData'}
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}></AppText>
+        </View>
+      ) : (
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          refreshing={isRefresh}
+          onRefresh={onRefresh}
+          onEndReachedThreshold={0.01}
+          onEndReached={(info) => {
+            onLoadMore();
+          }}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    paddingVertical: 10,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  itemFillter: {
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#929292',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  txtFillter: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
+});
+
+export default NotificaitonView;

src/Screens/Transaction/TimeTransaction/Item.js

+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Alert,
+} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <View style={styles.container}>
+      <Block flex={1} row>
+        <View style={styles.wrapLeft} />
+        <View style={styles.wrapDate}>
+          <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+        </View>
+        <Block padding={[5, 10]} space={'between'} flex={1}>
+          <View style={{justifyContent: 'center', flex: 1}}>
+            <Text numberOfLines={2} style={styles.txtBlack}>
+              {item.body}
+            </Text>
+          </View>
+          <Text style={styles.txt}>{item.pushed_at}</Text>
+        </Block>
+      </Block>
+    </View>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+});

src/Screens/Transaction/TimeTransaction/TimeTransaction.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {useState, useEffect} from 'react';
+import {getListNotification} from '../../../apis/Functions/users';
+import TimeTransactionView from './TimeTransactionView';
+import I18n from '../../../helper/i18/i18n';
+const PriceList = (props) => {
+  const [selected, setSelected] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+  const [fillter, setFillters] = useState('ALL');
+
+  useEffect(() => {
+    getData();
+  }, [fillter]);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setisRefresh(false);
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      Alert.alert(I18n.t('Notification'), res.data.message);
+    }
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    console.log(tottalPage);
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListNotification({
+      keyword: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+      type: fillter,
+    });
+    setPage(page + 1);
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
 
-const TimeTransaction = () => {
   return (
-    <View>
-      <Text>TimeTransaction view</Text>
-    </View>
+    <TimeTransactionView
+      onRefresh={onRefresh}
+      isRefresh={isRefresh}
+      onLoadMore={onLoadMore}
+      setFillters={setFillters}
+      fillter={fillter}
+      data={data}
+    />
   );
 };
 
-export default TimeTransaction;
+export default PriceList;

src/Screens/Transaction/TimeTransaction/TimeTransactionView.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import HeaderDrawer from '../../../components/Header/HeaderDrawer';
+import Item from './Item';
+import {getFontXD} from '../../../Config/Functions';
+import AppText from '../../../components/AppText';
+
+const Fillters = [
+  {
+    id: '1',
+    name: 'All',
+    value: 'ALL',
+  },
+  {
+    id: '2',
+    name: 'Deposit',
+    value: 'DEPOSIT',
+  },
+  {
+    id: '3',
+    name: 'Withdraw',
+    value: 'WITHDRAW',
+  },
+  {
+    id: '4',
+    name: 'Transfer',
+    value: 'TRANSFER',
+  },
+];
+
+const NotificaitonView = (props) => {
+  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {Fillters.map((e) => (
+            <TouchableOpacity
+              key={e.value}
+              onPress={() => setFillters(e.value)}
+              style={[
+                styles.itemFillter,
+                fillter == e.value ? {borderColor: '#1473E6'} : null,
+              ]}>
+              <AppText
+                i18nKey={e.name}
+                style={[
+                  styles.txtFillter,
+                  fillter == e.value ? {color: '#1473E6'} : {},
+                ]}></AppText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {data.length == 0 ? (
+        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+          <AppText
+            i18nKey={'NoData'}
+            style={{
+              fontSize: 18,
+              fontWeight: 'bold',
+            }}></AppText>
+        </View>
+      ) : (
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          refreshing={isRefresh}
+          onRefresh={onRefresh}
+          onEndReachedThreshold={0.01}
+          onEndReached={(info) => {
+            onLoadMore();
+          }}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    paddingVertical: 10,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+  },
+  itemFillter: {
+    borderRadius: 10,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: '#929292',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  txtFillter: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    fontWeight: 'bold',
+  },
+  txtTitle: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
+});
+
+export default NotificaitonView;