You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

96 lines
2.5 KiB

import React, { useCallback, useState } from "react";
import {
Image,
StyleSheet,
View,
Pressable,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import tw from "tailwind-rn";
import Drawer from "./Drawer";
//colors
import Color from "../constants/Colors";
//assets
import hamburgerLightIcon from "../assets/icons/hamburger-light.png";
import logoIcon from "../assets/icons/logo.png";
import qrLightIcon from "../assets/icons/qr-light.png";
import arLightIcon from "../assets/icons/ar-light.png";
const Navbar = ({ notification, back, setBoxPosition }) => {
const navigation = useNavigation();
const Button = useCallback(({ icon, route }) => {
return (
<Pressable
style={[
tw("rounded-sm p-1"),
{
backgroundColor: Color.theme1.light.blue1,
borderColor: Color.theme1.light.blue2,
borderWidth: 1,
marginLeft: route === "ar" ? 10 : 0,
},
]}
onPress={() => navigation.navigate(route)}
>
<Image source={icon} style={{ width: 20, height: 20 }} />
</Pressable>
);
}, []);
return (
<View
style={tw(
"w-full flex flex-row-reverse justify-between h-16 bg-white items-center px-0"
)}
>
<Pressable style={tw("relative mr-4")} onPress={() => setBoxPosition()}>
<Image
source={hamburgerLightIcon}
style={{ width: 29.5, height: 27 }}
/>
{notification && (
<View
style={tw(
"h-2.5 w-2.5 absolute -left-1 -top-1 bg-red-500 rounded-full"
)}
></View>
)}
</Pressable>
<Pressable
onPress={() => navigation.navigate("Home")}
style={tw("absolute right-1/2 top-1/2")}
>
<Image
source={logoIcon}
style={[
{
width: 19.6,
height: 28.9,
transform: [{ translateX: 0 }, { translateY: -14.5 }],
},
]}
/>
</Pressable>
<View style={tw("flex flex-row items-center ml-4")}>
{back && (
<Ionicons
name="arrow-back"
style={tw("mr-2")}
size={24}
color={"#196EC0"}
onPress={() => navigation.goBack()}
/>
)}
<Button icon={qrLightIcon} route={"QR"} />
<Button icon={arLightIcon} route={"ar"} />
</View>
</View>
);
};
export default Navbar;
const styles = StyleSheet.create({});