setup header home

ios/Invest.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

src/RootView.js

 import React, {useEffect} from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
 
 import {connect} from 'react-redux';
 import StackNavigation from './routers/StackNavigation';
 import Modal from 'react-native-modal';
 import {SkypeIndicator} from 'react-native-indicators';
+import {HEIGHT, HEIGHTXD} from './Config/Functions';
+import R from './assets/R';
 const RootView = (props) => {
   return (
     <View style={{flex: 1}}>
@@ -21,5 +23,20 @@ const mapStateToProps = (state) => {
     loadingModal: state.ModalLoadingReducer,
   };
 };
+const styles = StyleSheet.create({
+  container: {
+    height: HEIGHT(65),
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    paddingTop: 15,
+    backgroundColor: R.colors.red,
+  },
+  img: {
+    height: HEIGHTXD(788),
+    width: '100%',
+
+    justifyContent: 'center',
+  },
+});
 
 export default connect(mapStateToProps, {})(RootView);

src/Screens/Account/Account.js

+import React from 'react';
+
+import AccountView from './AccountView';
+
+const Account = (props) => {
+  return <AccountView />;
+};
+
+export default Account;

src/Screens/Account/AccountView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const AccountView = (props) => {
+  return (
+    <View>
+      <Text>Account screen</Text>
+    </View>
+  );
+};
+
+export default AccountView;

src/Screens/Exchange/Exchange.js

+import React from 'react';
+
+import ExchangeView from './ExchangeView';
+
+const Exchange = (props) => {
+  return <ExchangeView />;
+};
+
+export default Exchange;

src/Screens/Exchange/ExchangeView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const ExchangeView = (props) => {
+  return (
+    <View>
+      <Text>ExchangeView screen</Text>
+    </View>
+  );
+};
+
+export default ExchangeView;

src/Screens/Home/HomeView.js

 import React from 'react';
-import {View, Text} from 'react-native';
-
-const HomeView = props => {
+import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
+import HeaderHome from '../../components/Header/HeaderHome';
+import {HEIGHT, HEIGHTXD} from '../../Config/Functions';
+import R from '../../assets/R';
+const HomeView = (props) => {
   return (
     <View>
-      <Text>Home screen</Text>
+      <HeaderHome />
     </View>
   );
 };
 
 export default HomeView;
+const styles = StyleSheet.create({});

src/Screens/Notification/NotificaitonView.js

+import React from 'react';
+import {View, Text} from 'react-native';
+
+const NotificaitonView = (props) => {
+  return (
+    <View>
+      <Text>NotificaitonView screen</Text>
+    </View>
+  );
+};
+
+export default NotificaitonView;

src/Screens/Notification/Notification.js

+import React from 'react';
+
+import NotificationView from './NotificaitonView';
+
+const Notifcation = (props) => {
+  return <NotificationView />;
+};
+
+export default Notifcation;

src/assets/images.js

@@ -3,9 +3,10 @@ const images = {
   avartar: require('./images/avatar.jpg'),
   cmtnd: require('./images/cmntnd.jpg'),
   sign: require('./images/sign.jpg'),
-  iconWithdraw:require('./images/withdraw.png'),
-  iconDeposit:require('./images/deposit.png'),
-  iconAddUser:require('./images/addUser.png'),
+  iconWithdraw: require('./images/withdraw.png'),
+  iconDeposit: require('./images/deposit.png'),
+  iconAddUser: require('./images/addUser.png'),
+  headerHome: require('./images/Headerhome.png'),
 };
 
 export default images;

src/components/Header/HeaderHome.js

 import React, {useEffect} from 'react';
-import {View, Text, Image, StatusBar, StyleSheet} from 'react-native';
+import {
+  View,
+  Text,
+  Image,
+  StatusBar,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+} from 'react-native';
 import R from '../../assets/R';
-import {getFontXD, HEIGHT} from '../../config/Functions';
+import {getFontXD, HEIGHT} from '../../Config/Functions';
 import LinearGradient from 'react-native-linear-gradient';
-import  SnackBar from '../SnackBar'
-import { connect } from "react-redux";
+import {connect} from 'react-redux';
+import {HEIGHTXD} from '../../Config/Functions';
 const HeaderHome = (props) => {
-
-  const {fullname}=props.user
-
   return (
-    <LinearGradient
-      start={{x: 0, y: 0}}
-      end={{x: 0, y: 1}}
-      colors={['#0062E1', '#22AEFB']}>
-      <StatusBar barStyle="light-content" backgroundColor={'#0062E1'} />
-      <SnackBar />
-      <View style={styles.container}>
-        <Image source={R.images.avartar} style={styles.img} />
-        <View style={{marginLeft: 10}}>
-          <Text style={styles.txtTitle}>{fullname}</Text>
-          <Text style={styles.txt}>Nhân viên kinh doanh</Text>
-        </View>
-      </View>
-    </LinearGradient>
+    <ImageBackground style={styles.img} source={R.images.headerHome}>
+      <StatusBar backgroundColor="transparent" translucent={true} />
+    </ImageBackground>
   );
 };
 
-
-
-
 const mapStateToProps = (state) => {
   return {
     user: state.userReducer,
@@ -38,26 +29,18 @@ const mapStateToProps = (state) => {
 
 export default connect(mapStateToProps, {})(HeaderHome);
 
-
 const styles = StyleSheet.create({
   container: {
     height: HEIGHT(65),
     paddingHorizontal: 10,
     flexDirection: 'row',
     paddingTop: 15,
+    backgroundColor: R.colors.red,
   },
-  txtTitle: {
-    marginTop:2,
-    fontSize: getFontXD(42),
-    color: R.colors.white,
-    fontWeight: 'bold',
-  },
-  txt: {fontSize: getFontXD(36), color: R.colors.white},
   img: {
-    width: 50,
-    height: 50,
-    borderRadius: 50,
-    borderWidth: 1,
-    borderColor: R.colors.white,
+    height: HEIGHTXD(788),
+    width: '100%',
+
+    justifyContent: 'center',
   },
 });

src/routers/StackNavigation.js

@@ -24,7 +24,6 @@ function MyStack(props) {
 export default function App() {
   return (
     <Fragment>
-      <SafeAreaView />
       <NavigationContainer independent={true}>
         <MyStack />
       </NavigationContainer>

src/routers/TabNavigation.js

@@ -7,6 +7,9 @@ import Home from '../Screens/Home/Home';
 import {connect} from 'react-redux';
 import R from '../assets/R';
 import PlussModal from './PlussModal';
+import Notification from '../Screens/Notification/Notification';
+import Account from '../Screens/Account/Account';
+import Exchange from '../Screens/Exchange/Exchange';
 
 const Tab = createBottomTabNavigator();
 
@@ -14,6 +17,12 @@ const PayScreenComponent = () => {
   return null;
 };
 
+{
+  /* <ImageBackground style={styles.img} source={R.images.headerHome}>
+<StatusBar backgroundColor="transparent" translucent={true} />
+</ImageBackground> */
+}
+
 const TabNavigator = (props) => {
   return (
     <Tab.Navigator
@@ -32,7 +41,7 @@ const TabNavigator = (props) => {
 
       <Tab.Screen
         name="Screen2"
-        component={Home}
+        component={Account}
         options={{
           tabBarLabel: 'Tài khoản',
           tabBarIcon: ({color, size}) => (
@@ -51,7 +60,7 @@ const TabNavigator = (props) => {
 
       <Tab.Screen
         name="Screen3"
-        component={Home}
+        component={Exchange}
         options={{
           tabBarLabel: 'Giao dịch',
           tabBarIcon: ({color, size}) => (
@@ -61,7 +70,7 @@ const TabNavigator = (props) => {
       />
       <Tab.Screen
         name="Screen4"
-        component={Home}
+        component={Notification}
         options={{
           tabBarLabel: 'Thông báo',
           tabBarIcon: ({color, size}) => (