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
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({});
|
|
|