Hanoicomputer_App/components/header/headerMain.tsx

import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import { Text, View, } from '../Themed';
import { TextInput } from 'react-native-gesture-handler';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import { useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Animated, { Easing } from 'react-native-reanimated';

const Header = ({props} : {props : any}) => {
    const toggleDrawer = () => {
        //Props to open/close the drawer
        props.toggleDrawer();
    };
    return (
        <View style={styles.headerAll}>
        <View style={styles.header}>
            <TouchableOpacity onPress={toggleDrawer} style={styles.menu}>
                <Ionicons style={styles.iconMenu} name="md-list" size={32} />
            </TouchableOpacity>
            <View style={styles.bgNone}>
                <Image style={styles.img} source={{ uri: 'https://www.hanoicomputer.vn/media/lib/logo-trang.png' }} />
            </View>
            <View style={styles.headerCart}>
                <Ionicons style={styles.iconMenu} name="cart-outline" size={32} />
                <Text style={styles.countCart}>0</Text>
            </View>
        </View>
        <MainSeach />
        </View>
    );
}




const MainSeach = () => {
    const navigation = useNavigation();
    return (
        <View style={styles.boxSearch}>
            <View style={styles.boxSearchBo}>
                <TextInput style={styles.inputSearch} placeholder="Nhập tên, mã sản phẩm" autoCapitalize="none" />
                <Ionicons style={styles.buttonSearch} onPress={() => navigation.navigate('SearchProduct')} name="search-outline" size={26} />
            </View>
        </View>
    );
}

export { Header, MainSeach };

let winWidth = Dimensions.get('window').width; //full width
let winHeight = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
    headerAll: {
        width: winWidth,
        flex: 1,
    },
    bgNone: {
        backgroundColor: 'rgba(0, 0, 0, 0)',
    },
    header: {
        backgroundColor: '#243a76',
        height: 53,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: winWidth,
        padding: 10,
    },
    menu: {
        backgroundColor: '#243a76',
    },
    iconMenu: {
        color: '#fff',
    },
    headerCart: {
        backgroundColor: 'rgba(0,0,0,0)',
        position: 'relative',
    },
    countCart: {
        position: 'absolute',
        top: -5,
        right: -5,
        zIndex: 1,
        width: 20,
        height: 20,
        backgroundColor: '#ffe100',
        borderRadius: 10,
        textAlign: 'center',
        lineHeight: 20,
        fontSize: 13,
        color: '#000',
        overflow: 'hidden',
    },
    img: {
        height: 40,
        width: 100,
    },
    boxSearch: {
        position: 'relative',
        padding: 10,
        backgroundColor: '#fff',
        width: winWidth,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.18,
        shadowRadius: 1.00,
        elevation: 1,
    },
    boxSearchBo: {
        position: 'relative',
        flexDirection: 'row',
        borderWidth: 1,
        justifyContent: 'space-between',
        borderStyle: 'solid',
        alignItems: 'center',
        borderRadius: 5,
        display: 'flex',
        height: 38,
        padding: 0,
        margin: 0,
    },
    inputSearch: {
        width: winWidth - 65,
        padding: 10,
        paddingTop: 10,
        paddingBottom: 10,
        height: 36,
        margin: 0,
        fontSize: 14,
    },
    buttonSearch: {
        width: 40,
        textAlign: 'center',
        height: 36,
        lineHeight: 36,
    },
})