update code

src/Screens/Action/Withdraw/Item.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DEPOSIT} from '../../../routers/ScreenNames';
+import {useNavigation} from '@react-navigation/native';
+
+const Item = (props) => {
+  const {item, userId} = props;
+
+  const navigate = useNavigation();
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigate.navigate(DEPOSIT, {method: item, userId})}
+      style={styles.containerItem}>
+      <Image source={{uri: item.logo_url}} style={styles.imgIcon} />
+      <Text>{item.agent}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Item);
+
+const styles = StyleSheet.create({
+  containerItem: {
+    width: WIDTHXD(460),
+    height: HEIGHTXD(450),
+    backgroundColor: 'white',
+    marginTop: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 2.84,
+    elevation: 3,
+  },
+  imgIcon: {
+    width: WIDTHXD(400),
+    height: HEIGHTXD(300),
+    marginBottom: 10,
+    resizeMode: 'contain',
+  },
+});

src/Screens/Action/Withdraw/Withdraw.js

@@ -6,25 +6,6 @@ import {getListWidthDraw} from '../../../apis/Functions/Widthdraw';
 import {Alert} from 'react-native';
 
 const Withdraw = (props) => {
-  const [listMethod, setListMethod] = useState([]);
-  useEffect(() => {
-    getData();
-  }, []);
-
-  const getData = async () => {
-    const res = await getListWidthDraw({
-      page_index: 1,
-      page_size: 20,
-      platform: Platform.OS,
-    });
-
-    if (res.data.code == 200) {
-      setListMethod(res.data.data);
-    } else {
-      Alert.alert('Lấy danh sách phương thức rút tiền thất bại!');
-    }
-  };
-
   return <WithdrawView />;
 };
 

src/Screens/Action/Withdraw/WithdrawView.js

-import React from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, Text, StyleSheet, FlatList, Platform, Alert} from 'react-native';
+import R from '../../../assets/R';
 import HeaderBack from '../../../components/Header/HeaderBack';
-import TextField from '../../../components/Input/TextField';
-import TextMulti from '../../../components/Input/TextMulti';
-import Button from '../../../components/Button';
-import {HEIGHTXD} from '../../../Config/Functions';
+import Item from './Item';
+import {getListWidthDraw} from '../../../apis/Functions/Widthdraw';
+import {connect} from 'react-redux';
+
 const WithdrawView = (props) => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    const res = await getListWidthDraw({
+      platform: Platform.OS,
+    });
+    if (res.data.code == 200 && res.data.data) {
+      setData(res.data.data);
+    } else {
+      alert('Không lấy được danh sách phương thức!');
+    }
+  };
+
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Rút tiền'} />
-      <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
-        <TextField title={'Số tiền'} />
-        <TextField title={'Phương thức nạp'} />
-        <TextMulti numberLines={3} title={'Ghi chú'} />
-      </View>
-      <View style={styles.containerBtn}>
-        <Button title={'Rút tiền'} />
+      <HeaderBack title={'Chọn phương thức thanh toán'} />
+      <View style={{flex: 1}}>
+        <FlatList
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+          numColumns={2}
+          columnWrapperStyle={{
+            marginHorizontal: 20,
+            justifyContent: 'space-between',
+          }}
+          data={data}
+          renderItem={({item}) => <Item userId={props.user.uid} item={item} />}
+        />
       </View>
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  containerBtn: {
-    marginBottom: 15,
-  },
-});
-
-export default WithdrawView;
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+export default connect(mapStateToProps, {})(WithdrawView);

src/Screens/NewFeed/DetailNew.js

+import React, {useState} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
+
+import {WebView} from 'react-native-webview';
+import {root} from '../../apis/url';
+
+const DepositView = (props) => {
+  console.log('Link', root + '/api/v1/news/posts?id=' + props.route.params.id);
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack isWhite={true} title={'Chi tiết'} />
+      <WebView
+        source={{
+          uri:
+            root + 'api/v1/posts/detail/web-view?id=' + props.route.params.id,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerBtn: {
+    marginBottom: 15,
+  },
+});
+
+export default DepositView;

src/Screens/NewFeed/NewFeed.js

@@ -13,7 +13,8 @@ const NewFeed = (props) => {
     <View style={{flex: 1}}>
       <HeaderDrawer title={'Thông tin'} isWhite={true} />
       <View style={{flex: 1, backgroundColor: 'white'}}>
-        <Tab.Navigator
+        <Tab1 />
+        {/* <Tab.Navigator
           initialRouteName="GeneralInfor"
           tabBarOptions={{
             inactiveTintColor: '#929292',
@@ -31,7 +32,7 @@ const NewFeed = (props) => {
             component={Tab2}
             options={{tabBarLabel: 'Tin tức'}}
           />
-        </Tab.Navigator>
+        </Tab.Navigator> */}
       </View>
     </View>
   );

src/Screens/NewFeed/Tab1/Tab1.js

-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {
   View,
   Text,
@@ -6,10 +6,13 @@ import {
   ScrollView,
   TouchableOpacity,
   FlatList,
+  Platform,
+  Alert,
 } from 'react-native';
 import R from '../../../assets/R';
 import {getFontXD} from '../../../Config/Functions';
 import Item from './item';
+import {getListNew} from '../../../apis/Functions/NewFeed';
 
 const fillers = [
   {
@@ -30,60 +33,32 @@ const fillers = [
   },
 ];
 
-const data = [
-  {
-    id: '1',
-    increase: true,
-    title:
-      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
-    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
-    ratio: 'USR/RUB',
-    time: '45 min ago',
-  },
-  {
-    id: '2',
-    increase: false,
-    title:
-      'USD/AUD Giao dich trong ngày:Xu hướng gỉam lấn áp khi 84,80 là điểm kháng cự.',
-    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
-    ratio: 'USD/AUD',
-    time: '32 min ago',
-  },
-  {
-    id: '3',
-    increase: true,
-    title:
-      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
-    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
-    ratio: 'USR/RUB',
-    time: '2 h ago',
-  },
-  {
-    id: '4',
-    increase: false,
-    title:
-      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
-    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
-    ratio: 'USR/RUB',
-    time: '45 min ago',
-  },
-  {
-    id: '5',
-    increase: true,
-    title:
-      'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
-    content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
-    ratio: 'USR/RUB',
-    time: '45 min ago',
-  },
-];
-
 const NewFeed = (props) => {
   const [selected, setSelected] = useState(1);
   const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
   const [tottalPage, setTotalPage] = useState(1);
   const [isRefresh, setisRefresh] = useState(false);
 
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    const res = await getListNew({
+      keyword: '',
+      category_id: '',
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: page,
+    });
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+    } else {
+      Alert.alert('Thông báo!', res.data.message);
+    }
+  };
+
   const onRefresh = () => {
     console.log('On Refersh');
   };

src/Screens/NewFeed/Tab1/item.js

@@ -5,42 +5,28 @@ import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/AntDesign';
 import {getFontXD} from '../../../Config/Functions';
 import R from '../../../assets/R';
+import {useNavigation} from '@react-navigation/native';
+import {DETAILNEW} from '../../../routers/ScreenNames';
 
 const Item = (props) => {
-  const {title, increase, content, ratio, time} = props.item;
+  const navigate = useNavigation();
+  const {title, image, published_at, id} = props.item;
   return (
     <TouchableOpacity
-      onPress={() => console.log('hello')}
+      onPress={() => navigate.navigate(DETAILNEW, {id})}
       style={styles.container}>
-      <Text style={styles.txtTitle}>{title}</Text>
-      <Text>{content}</Text>
-      <View style={styles.row}>
-        <Block row center>
-          <View
-            style={[styles.wrap, increase ? {backgroundColor: '#03A021'} : {}]}>
-            <Icon name={'arrowup'} color={'white'} />
-            <Text style={{color: 'white'}}>Giao dich trong ngay</Text>
-          </View>
-          <View
-            style={[styles.wrap2, increase ? {borderColor: '#03A021'} : {}]}>
-            <Text>{ratio}</Text>
-          </View>
-        </Block>
-        <Text style={{color: '#929292'}}>{time}</Text>
-      </View>
-
-      <Image
-        source={R.images.tradding}
-        resizeMode={'contain'}
-        style={styles.img}
-      />
+      <Text numberOfLines={2} style={styles.txtTitle}>
+        {title}
+      </Text>
+      <Text style={styles.txtDate}>{published_at}</Text>
+      <Image source={{uri: image}} resizeMode={'cover'} style={styles.img} />
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginVertical: 10,
+    marginVertical: 15,
   },
   row: {
     flexDirection: 'row',
@@ -48,29 +34,22 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginVertical: 10,
   },
-  wrap: {
-    backgroundColor: '#D62936',
-    alignItems: 'center',
-    flexDirection: 'row',
-    marginRight: 10,
-    padding: 5,
-    borderRadius: 10,
-  },
-  wrap2: {
-    padding: 3,
-    borderWidth: 1,
-    borderColor: '#D62936',
-    alignItems: 'center',
-    borderRadius: 2,
-  },
+
   txtTitle: {
     fontSize: getFontXD(46),
     color: 'black',
     fontWeight: 'bold',
   },
+  txtDate: {
+    fontSize: getFontXD(46),
+    fontStyle: 'italic',
+    color: '#A2A2A2',
+  },
   img: {
     width: '100%',
-    height: 280,
+    height: 260,
+    borderRadius: 5,
+    marginTop: 5,
   },
 });
 

src/apis/Functions/NewFeed.js

+import {PostLogin, GetData, PostData} from '../helpers';
+
+import url from '../url';
+
+export const getListNew = async (body) =>
+  GetData(url.urlGetListNew, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

-const root = 'http://api.dcvinvest.com/';
+export const root = 'http://api.dcvinvest.com/';
 export default {
   urllogin: root + 'api/auth/customer-login',
   urlRegistor: root + 'api/auth/customer-register',
@@ -7,5 +7,7 @@ export default {
   urlVerifyOTP: root + 'api/auth/customer-verify-otp',
   urlForgotPassword: root + 'api/auth/customer-forgot-password',
   urlGetListWithDraw: root + 'api/v1/payments/get-list-withdraw-method',
+
   urlVerifyAccount: root + 'api/v1/customers/verify-account',
+  urlGetListNew: root + '/api/v1/news/posts',
 };

src/assets/images.js

@@ -7,8 +7,8 @@ const images = {
   iconDeposit: require('./images/deposit.png'),
   iconAddUser: require('./images/addUser.png'),
   headerHome: require('./images/imgHome.png'),
-  iconTransfer: require('./images/transfer.png'),
-  iconHistory: require('./images/history.png'),
+  iconTransfer: require('./images/iconTransfer1.png'),
+  iconHistory: require('./images/iconHistory1.png'),
   moneyinvest: require('./images/moneyinvest.png'),
   moneysupport: require('./images/moneysupport.png'),
   moneyteam: require('./images/moneyteam.png'),

src/components/Header/HeaderHome.js

@@ -35,7 +35,7 @@ const HeaderHome = (props) => {
 
   const copyToClipboard = () => {
     Alert.alert('Đã sao chép!');
-    Clipboard.setString(props.user.sponsor_id);
+    Clipboard.setString(props.user.sponsor_url);
   };
 
   return (
@@ -53,7 +53,7 @@ const HeaderHome = (props) => {
               </TouchableOpacity>
 
               <View style={styles.row1}>
-                <Text style={styles.txtlink}>{props.user.sponsor_id}</Text>
+                <Text style={styles.txtlink}>{props.user.user_id}</Text>
                 <TouchableOpacity onPress={copyToClipboard}>
                   <Image
                     source={R.images.iconCopy}

src/routers/ScreenNames.js

@@ -46,4 +46,5 @@ export const NEWPASSWORD = 'NEWPASSWORD';
 export const CONFIRMEMAIL = 'CONFIRMEMAIL';
 
 export const NEWFEED = 'NEWFEED';
+export const DETAILNEW = 'DETAILNEW';
 export const NOTIFICATION = 'NOTIFICATION';

src/routers/StackNavigation.js

@@ -30,6 +30,7 @@ import ChooseMethod from '../Screens/Action/Deposit/ChooseMethod';
 import NewPassWord from '../Screens/Authen/NewPassWord';
 import ConfirmEmail from '../Screens/Authen/ConfirmEmail';
 import Notification from '../Screens/Notification/Notification';
+import DetailNew from '../Screens/NewFeed/DetailNew';
 
 import * as ScreenName from './ScreenNames';
 
@@ -42,10 +43,11 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.TABNAVIGATOR}>
+      initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
+      <Stack.Screen name={ScreenName.DETAILNEW} component={DetailNew} />
       <Stack.Screen
         name={ScreenName.AccountVerification}
         component={AccountVerificaiton}