update code

android/app/src/main/java/com/invest/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import io.invertase.firebase.RNFirebasePackage;
 import com.oblador.vectoricons.VectorIconsPackage;

android/settings.gradle

 rootProject.name = 'Invest'
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-firebase'

index.js

@@ -5,5 +5,6 @@
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import Login from './src/Screens/NewFeed/Media/Login';
 
 AppRegistry.registerComponent(appName, () => App);

ios/Invest.xcodeproj/project.pbxproj

@@ -568,6 +568,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_ROOT}/YoutubePlayer-in-WKWebView/WKYTPlayerView/WKYTPlayerView.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -589,6 +590,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WKYTPlayerView.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -620,6 +622,7 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+				"${PODS_ROOT}/YoutubePlayer-in-WKWebView/WKYTPlayerView/WKYTPlayerView.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
@@ -641,6 +644,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WKYTPlayerView.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -902,7 +906,7 @@
 				);
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.4;
+				MARKETING_VERSION = 1.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -930,7 +934,7 @@
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.4;
+				MARKETING_VERSION = 1.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

ios/Invest/AppDelegate.m

@@ -7,7 +7,7 @@
 #import "Firebase.h"
 #import "RNFirebaseMessaging.h"
   
-
+#import <AVFoundation/AVFoundation.h>
 
 #if DEBUG
 #import <FlipperKit/FlipperClient.h>
@@ -40,6 +40,7 @@ static void InitializeFlipper(UIApplication *application) {
   [FIRApp configure];
    [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
      
+     [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                    moduleName:@"Invest"

ios/Invest/Info.plist

@@ -9,7 +9,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-	<string>Invest</string>
+	<string>DCVInvest</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

ios/Podfile

@@ -87,6 +87,8 @@ target 'Invest' do
 
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
+  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
+
   target 'InvestTests' do
     inherit! :complete
     # Pods for testing

ios/Podfile.lock

@@ -166,6 +166,9 @@ PODS:
     - Folly (= 2018.10.22.00)
     - RCTRequired (= 0.62.2)
     - React-Core (= 0.62.2)
+  - RCTYouTube (2.0.1):
+    - React
+    - YoutubePlayer-in-WKWebView (~> 0.3.1)
   - React (0.62.2):
     - React-Core (= 0.62.2)
     - React-Core/DevSupport (= 0.62.2)
@@ -424,6 +427,7 @@ PODS:
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
+  - YoutubePlayer-in-WKWebView (0.3.5)
 
 DEPENDENCIES:
   - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
@@ -456,6 +460,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
+  - RCTYouTube (from `../node_modules/react-native-youtube`)
   - React (from `../node_modules/react-native/`)
   - React-Core (from `../node_modules/react-native/`)
   - React-Core/DevSupport (from `../node_modules/react-native/`)
@@ -522,6 +527,7 @@ SPEC REPOS:
     - Protobuf
     - TOCropViewController
     - YogaKit
+    - YoutubePlayer-in-WKWebView
 
 EXTERNAL SOURCES:
   BVLinearGradient:
@@ -540,6 +546,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
     :path: "../node_modules/react-native/Libraries/TypeSafety"
+  RCTYouTube:
+    :path: "../node_modules/react-native-youtube"
   React:
     :path: "../node_modules/react-native/"
   React-Core:
@@ -638,6 +646,7 @@ SPEC CHECKSUMS:
   Protobuf: 0cde852566359049847168e51bd1c690e0f70056
   RCTRequired: cec6a34b3ac8a9915c37e7e4ad3aa74726ce4035
   RCTTypeSafety: 93006131180074cffa227a1075802c89a49dd4ce
+  RCTYouTube: 4509d59a7de050dd0c7c6cb1f427d37678d63b5c
   React: 29a8b1a02bd764fb7644ef04019270849b9a7ac3
   React-Core: b12bffb3f567fdf99510acb716ef1abd426e0e05
   React-CoreModules: 4a9b87bbe669d6c3173c0132c3328e3b000783d0
@@ -670,7 +679,8 @@ SPEC CHECKSUMS:
   TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
+  YoutubePlayer-in-WKWebView: cfbf46da51d7370662a695a8f351e5fa1d3e1008
 
-PODFILE CHECKSUM: 6c1aab2c5d54fffaeb8b43c847c486a421cbfebc
+PODFILE CHECKSUM: f02917090f1c2c208cddccf3054d7b56a8888192
 
 COCOAPODS: 1.10.1

package.json

@@ -41,6 +41,7 @@
     "react-native-tab-view": "^2.15.2",
     "react-native-vector-icons": "^8.0.0",
     "react-native-webview": "^11.2.5",
+    "react-native-youtube": "^2.0.1",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",

src/Config/Functions.js

@@ -234,7 +234,8 @@ export const convertDate = (date) => {
 };
 
 export const convertTime = (date) => {
-  const time = moment(date).format('YYYY-MM-DD');
+  const temp = new Date(moment(date, 'DD/MM/YYYY'));
+  const time = moment(temp).format('YYYY-MM-DD');
   return time;
 };
 

src/Screens/AccountVerification/Tab/BankInfor.js

@@ -40,7 +40,7 @@ const BankInfor = (props) => {
   const [bank_no, setBackNo] = useState('');
   const [account_no, setAccountNo] = useState('');
 
-  console.log(props.user.uid);
+  console.log(props.route.params.body);
 
   const createFormData = (identity_after, identity_before, sign_img, body) => {
     const data = new FormData();
@@ -79,6 +79,7 @@ const BankInfor = (props) => {
   const onPress = async () => {
     const titles = ['loại thẻ', 'mã ngân hàng', 'số thẻ/tài khoản'];
     const index = checkFormatArray([acc_type, bank_no, account_no]);
+    console.log('Data', props.route.params.body);
 
     if (index === true) {
       const data = createFormData(

src/Screens/AccountVerification/Tab/GeneralInfor.js

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import R from '../../../assets/R';
+import moment from 'moment';
 
 import TextField from '../../../components/Input/TextField';
 import TextMulti from '../../../components/Input/TextMulti';
@@ -76,7 +77,12 @@ const GeneralInfor = (props) => {
           />
           <PickerDate
             value={birth}
-            onValueChange={(val) => setBirth(val)}
+            onValueChange={(val) => {
+              console.log(val);
+              console.log('Value', convertTime(val));
+
+              // setBirth(new Date(moment(val).format('MM/DD/YYYY')).getTime());
+            }}
             title={'Ngày sinh'}
           />
 

src/Screens/NewFeed/Media/Item.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+} from 'react-native';
+import R from '../../../assets/R';
+import {getFontXD} from '../../../Config/Functions';
+import Icon from 'react-native-vector-icons/AntDesign';
+import {useNavigation} from '@react-navigation/native';
+import {MEDIADETAIL} from '../../../routers/ScreenNames';
+const Item = (props) => {
+  const navigate = useNavigation();
+  const {title, time_ago, poster, view_count, id, video_id} = props.item;
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigate.navigate(MEDIADETAIL, {id, video_id, title})}
+      style={styles.container}>
+      <ImageBackground
+        resizeMode={'contain'}
+        source={{uri: poster}}
+        imageStyle={{borderRadius: 5}}
+        style={styles.img}>
+        <Icon
+          name={'playcircleo'}
+          color={R.colors.white}
+          size={getFontXD(62)}
+        />
+      </ImageBackground>
+      <Text style={styles.txtTitle} numberOfLines={2}>
+        {title}
+      </Text>
+      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+        <Text style={{color: '#8E8C8C'}}>{time_ago}</Text>
+        <View style={styles.row}>
+          <Icon name={'eye'} size={getFontXD(36)} color={'#8E8C8C'} />
+          <Text style={{color: '#8E8C8C'}}>{view_count}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 250,
+    paddingVertical: 5,
+    marginRight: 15,
+  },
+  img: {
+    width: 250,
+    height: 200,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    marginVertical: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: 40,
+    justifyContent: 'space-around',
+  },
+});
+
+export default Item;

src/Screens/NewFeed/Media/Login.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import R from '../../../assets/R';
+import LinearGradient from 'react-native-linear-gradient';
+import {getFontXD} from '../../../Config/Functions';
+import Block from '../../../components/Block';
+import Icon from 'react-native-vector-icons/AntDesign';
+const MediaView = (props) => {
+  return (
+    <ImageBackground
+      resizeMode={'center'}
+      style={styles.containerTop}
+      source={R.images.login_bg}>
+      <Text>Hello</Text>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerTop: {
+    height: '100%',
+    width: '100%',
+    backgroundColor: 'white',
+  },
+  contentTop: {
+    padding: 10,
+    flex: 1,
+  },
+  txtBig: {
+    fontSize: getFontXD(52),
+    color: R.colors.white,
+    fontWeight: 'bold',
+  },
+  containerBtn: {
+    paddingHorizontal: 15,
+    paddingVertical: 5,
+    backgroundColor: '#1C6AF6',
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 2,
+  },
+  txtPlay: {
+    color: R.colors.white,
+    fontSize: getFontXD(42),
+    fontWeight: 'bold',
+    marginLeft: 5,
+  },
+  txtDate: {
+    color: R.colors.white,
+    fontSize: getFontXD(42),
+    marginLeft: 5,
+  },
+});
+
+export default MediaView;

src/Screens/NewFeed/Media/Media.js

+import React, {Component, useEffect, useState} from 'react';
+import {View, Text, Platform, Alert} from 'react-native';
+
+import MediaView from './MediaView';
+import {getListMedia} from '../../../apis/Functions/NewFeed';
+
+const Media = (props) => {
+  const [data, setData] = useState([]);
+  const [mediaHot, setMediaHot] = useState();
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    const res = await getListMedia({
+      keyword: '',
+      topic_id: '',
+      platform: Platform.OS,
+    });
+    if (res.data.code == 200 && res.data.data) {
+      if (res.data.data[0] && res.data.data[0].data[0])
+        setMediaHot(res.data.data[0].data[0]);
+      setData(res.data.data);
+    } else {
+      Alert.alert('Thông báo', 'Không lấy được dữ liệu!');
+    }
+  };
+
+  return <MediaView data={data} mediaHot={mediaHot} />;
+};
+
+export default Media;

src/Screens/NewFeed/Media/MediaDetail.js

+import React, {useState, useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+  FlatList,
+} from 'react-native';
+import YouTube from 'react-native-youtube';
+import R from '../../../assets/R';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import {getFontXD} from '../../../Config/Functions';
+import Icon from 'react-native-vector-icons/AntDesign';
+import {useNavigation} from '@react-navigation/native';
+import {MEDIADETAIL} from '../../../routers/ScreenNames';
+import {getDetailMedia} from '../../../apis/Functions/NewFeed';
+
+const Item = (props) => {
+  const navigate = useNavigation();
+
+  const {title, poster, published_at, id} = props.item;
+
+  return (
+    <TouchableOpacity
+      onPress={() => props.onChangeID(id)}
+      style={styles.containerItem}>
+      <ImageBackground
+        resizeMode={'cover'}
+        imageStyle={{borderRadius: 5, width: 140, height: 100}}
+        style={styles.img}
+        source={{uri: poster}}>
+        <Icon
+          name={'playcircleo'}
+          color={R.colors.white}
+          size={getFontXD(52)}
+        />
+      </ImageBackground>
+      <View style={styles.wrapRight}>
+        <View style={{flex: 1}}>
+          <Text style={styles.txtTitle} numberOfLines={2}>
+            {title}
+          </Text>
+        </View>
+        <Text>{published_at}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const MediaDetail = (props) => {
+  const [id, setID] = useState(props.route.params.id);
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    getData();
+  }, [id]);
+  onChangeID = (item) => setID(item);
+
+  const getData = async () => {
+    const res = await getDetailMedia(id);
+    if (res.data.code == 200 && res.data.data) {
+      setData(res.data.data);
+    } else {
+      Alert.alert('Thông báo', 'Không lấy được dữ liệu!');
+    }
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Chi tiết video'} />
+      {data ? (
+        <View style={{flex: 1}}>
+          <YouTube
+            apiKey={'AIzaSyAMj3UyhieazgdBFGeZ33V6C3zweAYpvP8'}
+            videoId={data.video_id}
+            play={false}
+            onError={(e) => console.log({error: e.error})}
+            style={{alignSelf: 'stretch', height: 300}}
+          />
+          <View style={styles.wrapTitle}>
+            <Text style={styles.txtTitle}>{data.title}</Text>
+          </View>
+          <View style={styles.body}>
+            <Text style={styles.txtBig}>Video xem nhiều</Text>
+            <FlatList
+              showsVerticalScrollIndicator={false}
+              data={data.related_videos}
+              renderItem={({item}) => (
+                <Item onChangeID={onChangeID} item={item} />
+              )}
+              keyExtractor={(item) => item.id}
+            />
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  txtTitle: {
+    fontSize: getFontXD(42),
+  },
+  txtBig: {
+    fontSize: getFontXD(46),
+    fontWeight: 'bold',
+  },
+  wrapTitle: {
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    borderBottomWidth: 0.7,
+    borderBottomColor: R.colors.borderGray,
+  },
+  body: {
+    paddingHorizontal: 10,
+    paddingTop: 10,
+    flex: 1,
+  },
+  img: {
+    width: 140,
+    height: 100,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerItem: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    borderBottomColor: R.colors.borderGray,
+    borderBottomWidth: 0.7,
+  },
+  wrapRight: {
+    flex: 1,
+    marginLeft: 10,
+  },
+});
+
+export default MediaDetail;

src/Screens/NewFeed/Media/MediaView.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+  FlatList,
+  ScrollView,
+} from 'react-native';
+import R from '../../../assets/R';
+import LinearGradient from 'react-native-linear-gradient';
+import {getFontXD} from '../../../Config/Functions';
+import Block from '../../../components/Block';
+import Icon from 'react-native-vector-icons/AntDesign';
+import TopMedia from './TopMedia';
+import Item from './Item';
+
+const MediaView = (props) => {
+  const {data, mediaHot} = props;
+
+  return (
+    <ScrollView showsVerticalScrollIndicator={false} style={{flex: 1}}>
+      <TopMedia mediaHot={mediaHot} />
+      <View style={{paddingHorizontal: 10, flex: 1, marginTop: 10}}>
+        {data.map((item, index) => (
+          <View key={index + 'g'} style={styles.containerItem}>
+            <Text style={styles.txtTitle}>{item.name}</Text>
+            <FlatList
+              horizontal={true}
+              showsHorizontalScrollIndicator={false}
+              keyExtractor={(itemChil) => itemChil.id}
+              data={item.data}
+              renderItem={({item}) => <Item item={item} />}
+            />
+          </View>
+        ))}
+      </View>
+      <View style={{height: 50}} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerTop: {
+    height: 350,
+    width: '100%',
+  },
+  containerItem: {
+    padding: 10,
+    borderBottomWidth: 0.6,
+    borderBottomColor: R.colors.borderGray,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: R.colors.black,
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+  },
+});
+
+export default MediaView;

src/Screens/NewFeed/Media/TopMedia.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ImageBackground,
+  TouchableOpacity,
+} from 'react-native';
+import R from '../../../assets/R';
+import LinearGradient from 'react-native-linear-gradient';
+import {getFontXD} from '../../../Config/Functions';
+import Block from '../../../components/Block';
+import Icon from 'react-native-vector-icons/AntDesign';
+import {useNavigation} from '@react-navigation/native';
+import {MEDIADETAIL} from '../../../routers/ScreenNames';
+
+const MediaView = (props) => {
+  //   const {poster,title} = props.mediaHot;
+  //   console.log(mediaHot);
+  const navigate = useNavigation();
+  if (props.mediaHot) {
+    const {poster, title, published_at, id, video_id} = props.mediaHot;
+
+    return (
+      <ImageBackground
+        resizeMode={'cover'}
+        style={styles.containerTop}
+        source={{uri: poster}}>
+        <LinearGradient
+          start={{x: 0, y: 0}}
+          end={{x: 0, y: 1}}
+          colors={[
+            'rgba(0, 0, 0, 0)',
+            'rgba(0, 0, 0, 0.0)',
+            'rgba(0, 0, 0, 0.7)',
+          ]}
+          style={{flex: 1}}>
+          <View style={{flex: 2}} />
+          <View style={styles.contentTop}>
+            <Text numberOfLines={2} style={styles.txtBig}>
+              {title}
+            </Text>
+            <Block row space={'between'} padding={[10, 10]}>
+              <View style={{flexDirection: 'row'}}>
+                <Icon
+                  name={'calendar'}
+                  color={R.colors.white}
+                  size={getFontXD(46)}
+                />
+                <Text style={styles.txtDate}>{published_at}</Text>
+              </View>
+              <TouchableOpacity
+                onPress={() =>
+                  navigate.navigate(MEDIADETAIL, {id, video_id, title})
+                }
+                style={styles.containerBtn}>
+                <Icon
+                  name={'playcircleo'}
+                  color={R.colors.white}
+                  size={getFontXD(46)}
+                />
+                <Text style={styles.txtPlay}>Xem video</Text>
+              </TouchableOpacity>
+            </Block>
+          </View>
+        </LinearGradient>
+      </ImageBackground>
+    );
+  }
+
+  return (
+    <View>
+      <Text>H</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  containerTop: {
+    height: 300,
+    width: '100%',
+  },
+  contentTop: {
+    padding: 10,
+    flex: 1,
+  },
+  txtBig: {
+    fontSize: getFontXD(52),
+    color: R.colors.white,
+    fontWeight: 'bold',
+  },
+  containerBtn: {
+    paddingHorizontal: 15,
+    paddingVertical: 5,
+    backgroundColor: '#1C6AF6',
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 1.84,
+    elevation: 2,
+  },
+  txtPlay: {
+    color: R.colors.white,
+    fontSize: getFontXD(42),
+    fontWeight: 'bold',
+    marginLeft: 5,
+  },
+  txtDate: {
+    color: R.colors.white,
+    fontSize: getFontXD(42),
+    marginLeft: 5,
+  },
+});
+
+export default MediaView;

src/Screens/NewFeed/NewFeed.js

@@ -3,6 +3,8 @@ import {View, Text, StatusBar, SafeAreaView} from 'react-native';
 import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
 import Tab1 from './Tab1/Tab1';
 import Tab2 from './Tab2/Tab2';
+import Media from './Media/Media';
+import Trading from './Tradding/Tradding';
 
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 const Tab = createMaterialTopTabNavigator();
@@ -31,7 +33,7 @@ const NewFeed = (props) => {
           />
           <Tab.Screen
             name="Tab2"
-            component={Tab2}
+            component={Media}
             options={{tabBarLabel: 'Media'}}
           />
           <Tab.Screen
@@ -41,7 +43,7 @@ const NewFeed = (props) => {
           />
           <Tab.Screen
             name="Tab4"
-            component={Tab2}
+            component={Trading}
             options={{tabBarLabel: 'Biểu đồ'}}
           />
         </Tab.Navigator>

src/Screens/NewFeed/Tradding/Tradding.js

+import React, {Component} from 'react';
+import {View, Text} from 'react-native';
+import {WebView} from 'react-native-webview';
+const Trading = (props) => {
+  return (
+    <View style={{flex: 1}}>
+      <WebView
+        style={{height: '100%', width: '100%'}}
+        source={{
+          uri: 'http://api.dcvinvest.com/webview/tradingview/chart',
+        }}
+      />
+    </View>
+  );
+};
+
+export default Trading;

src/apis/Functions/NewFeed.js

@@ -11,3 +11,13 @@ export const getListCategoryNew = async (body) =>
   GetData(url.urlGetCategoryNew, body)
     .then((res) => res)
     .catch((err) => err);
+
+export const getListMedia = async (body) =>
+  GetData(url.urlGetListMedia, body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const getDetailMedia = async (id) =>
+  GetData(url.urlMediaDetail + '/' + id)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -11,4 +11,6 @@ export default {
   urlVerifyAccount: root + 'api/v1/customers/verify-account',
   urlGetListNew: root + '/api/v1/news/posts',
   urlGetCategoryNew: root + 'api/v1/news/categories',
+  urlGetListMedia: root + 'api/v1/news/videos',
+  urlMediaDetail: root + 'api/v1/videos/detail',
 };

src/assets/images.js

@@ -61,6 +61,8 @@ const images = {
   iconIntroduct: require('./images/iconIntroduct.png'),
   iconBtnGreen: require('./images/iconBtnGreen.png'),
   iconCheck: require('./images/iconCheck.png'),
+  bgmedia: require('./images/bgmedia.jpeg'),
+  login_bg: require('./images/login_bg.png'),
 };
 
 export default images;

src/components/Header/HeaderColor.js

+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StatusBar,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+  TouchableOpacity,
+  Platform,
+  Button,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import R from '../../assets/R';
+import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
+import LinearGradient from 'react-native-linear-gradient';
+import {connect} from 'react-redux';
+import {HEIGHTXD} from '../../Config/Functions';
+import {useNavigation} from '@react-navigation/native';
+const HeaderHome = (props) => {
+  const {title} = props;
+  const navigate = useNavigation();
+  return (
+    <View style={styles.headerContainer}>
+      <SafeAreaView style={styles.container} />
+      <StatusBar backgroundColor="transparent" translucent={true} />
+      <TouchableOpacity onPress={() => navigate.goBack()}>
+        <Image source={R.images.iconBack} style={styles.imgIcon} />
+      </TouchableOpacity>
+
+      <Text style={styles.txtTitle}>{title}</Text>
+      <View />
+    </View>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(HeaderHome);
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    height: 55,
+    backgroundColor: '#0047CC',
+    width: '100%',
+  },
+  imgIcon: {
+    width: 30,
+    height: 30,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: R.colors.white,
+    fontWeight: 'bold',
+  },
+  container: {
+    backgroundColor: 'white',
+    height: '100%',
+    width: 300,
+    borderRadius: 20,
+  },
+});

src/routers/ScreenNames.js

@@ -56,3 +56,4 @@ export const WALLET = 'WALLET';
 export const WALLETDEPOSIT = 'WALLETDEPOSIT';
 export const WALLETWITHDRAW = 'WALLETWITHDRAW';
 export const PACKETCQG = 'PACKETCQG';
+export const MEDIADETAIL = 'MEDIADETAIL';

src/routers/StackNavigation.js

@@ -37,6 +37,8 @@ import Wallet from '../Screens/Action/Wallet/Wallet';
 import WalletDeposit from '../Screens/Action/Wallet/WalletDeposit';
 import WalletWithdraw from '../Screens/Action/Wallet/WalletWithdraw';
 import PacketCQG from '../Screens/Account/PacrtCQG/PacketCQG';
+import MediaDetail from '../Screens/NewFeed/Media/MediaDetail';
+
 import * as ScreenName from './ScreenNames';
 
 const Stack = createStackNavigator();
@@ -51,6 +53,7 @@ function MyStack(props) {
       initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
+      <Stack.Screen name={ScreenName.MEDIADETAIL} component={MediaDetail} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen name={ScreenName.PACKETCQG} component={PacketCQG} />
       <Stack.Screen name={ScreenName.WALLET} component={Wallet} />

yarn.lock

@@ -5973,7 +5973,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6105,7 +6105,7 @@ react-native-iphone-x-helper@^1.3.0:
 
 react-native-linear-gradient@^2.5.6:
   version "2.5.6"
-  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz"
+  resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0"
   integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg==
 
 react-native-modal-dropdown@^1.0.0:
@@ -6172,6 +6172,13 @@ react-native-webview@^11.2.5:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"
 
+react-native-youtube@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-youtube/-/react-native-youtube-2.0.1.tgz#1b6275ca2c1db8e13539a59ccfda8ae8479b1590"
+  integrity sha512-CVzJyynKoEEMXHv/Nx+s8HdovnfVIZs0DIUjWUQsgEd+kbBubXJZTguCKj4WigI8SI1LJ0thF8SEGbdqW8oJkw==
+  dependencies:
+    prop-types "^15.5.0"
+
 react-native@0.62.2:
   version "0.62.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.62.2.tgz"