edit ui

src/Screens/Action/History/HistoryView.js

@@ -41,6 +41,7 @@ const HistoryView = (props) => {
       <HeaderBack isWhite={true} title={'LỊCH SỬ'} />
       <View style={{flex: 1}}>
         <View style={styles.headerContainer}>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
             {Fillters.map((e) => (
               <TouchableOpacity
                 key={e.value}
@@ -58,6 +59,7 @@ const HistoryView = (props) => {
                 </Text>
               </TouchableOpacity>
             ))}
+          </ScrollView>
         </View>
 
         {data.length == 0 ? (
@@ -80,7 +82,7 @@ const HistoryView = (props) => {
             onEndReached={(info) => {
               onLoadMore();
             }}
-            keyExtractor={(item) => item.id}
+            keyExtractor={(item) => item.id + 'a'}
             data={data}
             renderItem={({item}) => <Item item={item} />}
           />
@@ -106,6 +108,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#929292',
     minWidth: 70,
+    marginRight: 10,
   },
   txtFillter: {
     fontSize: getFontXD(36),

src/Screens/Action/Wallet/Tab/Item.js

@@ -16,7 +16,6 @@ const Item = (props) => {
   const {item} = props;
   const navigate = useNavigation();
   return (
-    <TouchableOpacity onPress={() => console.log('hello')}>
     <View style={styles.container}>
       <Block flex={1} row>
         {/* <View style={[styles.wrapLeft, {backgroundColor: item.color}]} />
@@ -45,13 +44,10 @@ const Item = (props) => {
           <Text numberOfLines={2} style={styles.txt}>
             {item.comments}
           </Text>
-            <Text style={styles.txtDate}>
-              {item.transection_date_timestamp}
-            </Text>
+          <Text style={styles.txtDate}>{item.transection_date_timestamp}</Text>
         </Block>
       </Block>
     </View>
-    </TouchableOpacity>
   );
 };
 
@@ -88,7 +84,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
   },
   txtTitle: {
-    fontSize: getFontXD(48),
+    fontSize: getFontXD(42),
     color: R.colors.black,
     fontWeight: '700',
   },

src/Screens/Home/HomeView.js

@@ -13,13 +13,12 @@ import R from '../../assets/R';
 const HomeView = (props) => {
   const {total_deposit, total_withdraw} = props.data;
   return (
-    <View style={{flex: 1}}>
+    <ImageBackground
+      source={R.images.bgHome}
+      resizeMode={'stretch'}
+      style={{width: '100%', height: '100%'}}>
+      <ScrollView showsVerticalScrollIndicator={false}>
         <HeaderHome />
-      <View style={styles.body}>
-        <ScrollView
-          showsVerticalScrollIndicator={false}
-          style={styles.containerBody}>
-          <View style={{height: 10}} />
         <View style={styles.containerMenu}>
           <View style={styles.row}>
             <View style={styles.row}>
@@ -37,9 +36,7 @@ const HomeView = (props) => {
                 <Text style={styles.txtTitle}>Rút tiền</Text>
                 <Text style={styles.txtMoney}>
                   {' '}
-                    {total_withdraw == 0
-                      ? 0
-                      : toPriceVnd(total_withdraw)} Đ{' '}
+                  {total_withdraw == 0 ? 0 : toPriceVnd(total_withdraw)} Đ{' '}
                 </Text>
               </View>
             </View>
@@ -50,9 +47,7 @@ const HomeView = (props) => {
               <Text style={styles.txtTitle}>Hoa hồng</Text>
               <Text style={styles.txtMoney1}>+ 0 Đ </Text>
             </View>
-              <View
-                style={{width: 0.5, backgroundColor: R.colors.borderGray}}
-              />
+            <View style={{width: 0.5, backgroundColor: R.colors.borderGray}} />
             <View style={styles.itemMenu}>
               <Text style={styles.txtTitle}>Lợi nhuận</Text>
               <Text style={styles.txtMoney1}>0 Đ</Text>
@@ -62,8 +57,7 @@ const HomeView = (props) => {
 
         <Footer />
       </ScrollView>
-      </View>
-    </View>
+    </ImageBackground>
   );
 };
 
@@ -82,7 +76,8 @@ const styles = StyleSheet.create({
   containerMenu: {
     height: 160,
     backgroundColor: 'white',
-    marginVertical: 10,
+    marginTop: 20,
+    marginBottom: 10,
     marginHorizontal: 20,
     borderRadius: 10,
     shadowColor: '#000',

src/Screens/Notification/NotificaitonView.js

 import React, {useState} from 'react';
-import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 
 import HeaderDrawer from '../../components/Header/HeaderDrawer';
 import Item from './Item';
@@ -34,7 +41,9 @@ const NotificaitonView = (props) => {
   return (
     <View style={{flex: 1}}>
       <HeaderDrawer isWhite={true} title={'Thông báo'} />
+
       <View style={styles.headerContainer}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
           {Fillters.map((e) => (
             <TouchableOpacity
               key={e.value}
@@ -52,7 +61,9 @@ const NotificaitonView = (props) => {
               </Text>
             </TouchableOpacity>
           ))}
+        </ScrollView>
       </View>
+
       {data.length == 0 ? (
         <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
           <Text
@@ -85,7 +96,6 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     backgroundColor: 'white',
     flexDirection: 'row',
-    justifyContent: 'space-around',
     alignItems: 'center',
     paddingHorizontal: 10,
   },
@@ -95,9 +105,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     borderWidth: 1,
     borderColor: '#929292',
-    minWidth: 80,
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 10,
   },
   txtFillter: {
     fontSize: getFontXD(36),

src/assets/images.js

@@ -12,8 +12,9 @@ const images = {
   moneyinvest: require('./images/moneyinvest.png'),
   moneysupport: require('./images/moneysupport.png'),
   moneyteam: require('./images/moneyteam.png'),
-  bgHeader: require('./images/bgHeader1.png'),
+  bgHeader: require('./images/bgheader5.png'),
   iconMenu: require('./images/iconmenu.png'),
+  bgHome: require('./images/bgHome5.png'),
 
   iconUser: require('./images/iconUser1.png'),
   iconUserAccuracy: require('./images/iconUserAccuracy.png'),

src/components/Header/HeaderBack.js

@@ -48,15 +48,12 @@ export default connect(mapStateToProps, {})(HeaderHome);
 
 const styles = StyleSheet.create({
   img: {
-    height: 110,
+    height: 95,
     width: '100%',
-
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 30,
   },
   headerContainer: {
-    height: 55,
-    paddingTop: 10,
+    height: 40,
     width: '100%',
     alignItems: 'center',
     flexDirection: 'row',

src/components/Header/HeaderDrawer.js

@@ -77,11 +77,10 @@ export default connect(mapStateToProps, {})(HeaderDrawer);
 
 const styles = StyleSheet.create({
   img: {
-    height: 110,
+    height: 95,
     width: '100%',
 
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 30,
   },
   headerContainer: {
     height: 55,

src/components/Header/HeaderHome.js

@@ -117,9 +117,7 @@ const HeaderHome = (props) => {
 
   return (
     <View style={styles.container}>
-      <ImageBackground style={styles.img} source={R.images.headerHome}>
       <StatusBar backgroundColor="transparent" translucent={true} />
-      </ImageBackground>
       <View
         style={{
           justifyContent: 'center',
@@ -230,7 +228,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 2.84,
     elevation: 3,
-    marginTop: -180,
+    marginTop: HEIGHTXD(150),
   },
   containerMenu: {
     justifyContent: 'space-between',

src/components/Header/HeaderNewFeed.js

@@ -74,11 +74,10 @@ export default connect(mapStateToProps, {})(HeaderHome);
 
 const styles = StyleSheet.create({
   img: {
-    height: 110,
+    height: 95,
     width: '100%',
 
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 30,
   },
   headerContainer: {
     height: 55,

src/components/Header/HeaderSB.js

@@ -75,11 +75,10 @@ export default connect(mapStateToProps, {})(HeaderSearch);
 
 const styles = StyleSheet.create({
   img: {
-    height: 110,
+    height: 95,
     width: '100%',
 
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 30,
   },
   headerContainer: {
     height: 55,

src/components/Header/HeaderSearch.js

@@ -100,11 +100,9 @@ export default connect(mapStateToProps, {})(HeaderSearch);
 
 const styles = StyleSheet.create({
   img: {
-    height: 110,
+    height: 95,
     width: '100%',
-
-    justifyContent: 'center',
-    alignItems: 'center',
+    paddingTop: 30,
   },
   headerContainer: {
     height: 55,