56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Ionicons, AntDesign } from "@expo/vector-icons";
|
|
import { Text, View } from "react-native";
|
|
type name = keyof typeof Ionicons.glyphMap & keyof typeof AntDesign.glyphMap;
|
|
type type = "Ionicons" | "AntDesign";
|
|
export const initIcon = (
|
|
name: name,
|
|
type: type,
|
|
tabBarBadge: string,
|
|
isInfo: boolean
|
|
) => {
|
|
const IconComponent = type == "Ionicons" ? Ionicons : AntDesign;
|
|
return ({ focused, color, size }) => (
|
|
<>
|
|
{!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
|
|
<IconComponent name={name} size={30} color={focused ? "#0099CC" : "black"} />
|
|
</>
|
|
);
|
|
};
|
|
type BadgeProps = { tabBarBadge: string; isInfo: boolean };
|
|
|
|
export const Badge: FC<BadgeProps> = ({ tabBarBadge, isInfo }) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
position: "relative",
|
|
top: -5,
|
|
right: 0,
|
|
zIndex: 100,
|
|
padding: 1,
|
|
width: 0,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
backgroundColor: isInfo ? "#00b8ff" : "red",
|
|
borderRadius: 10,
|
|
padding: 2,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
}}
|
|
>
|
|
<Text style={{ color: "white", paddingHorizontal: 4 }}>
|
|
{tabBarBadge}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|