add new action

Apps.js

@@ -14,15 +14,13 @@ export function AppContainer() {
   const Tab = createBottomTabNavigator();
   const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
   const navigationRef = React.useRef();
-  const getTabProps = (name, label, icon, iconFamily, tabBarBadge, style) => ({
+  const getTabProps = (name, label, icon, iconFamily, tabBarBadge, isInfo) => ({
     name,
     options: {
       tabBarLabel: label,
       headerShown: false,
       gestureEnabled: true,
-      tabBarIcon: initIcon(icon, iconFamily),
-      tabBarBadge,
-      tabBarBadgeStyle: style,
+      tabBarIcon: initIcon(icon, iconFamily,tabBarBadge,isInfo),
       
     },
   });
@@ -38,7 +36,6 @@ export function AppContainer() {
         screenOptions={{
           lazy: false,
           animation: "shift",
-          tabBarVariant: "uikit",
         }}
         detachInactiveScreens={false}
         lazy={false}
@@ -59,10 +56,7 @@ export function AppContainer() {
             "train",
             "Ionicons",
             areaInfo ? areaIconBadgeText : undefined,
-            isInfo && {
-              backgroundColor: "#00b8ff",
-              color: "white",
-            }
+            isInfo
           )}
           children={TNDView}
         />

lib/initIcon.tsx

@@ -1,20 +1,72 @@
-import React from "react";
+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) => {
+export const initIcon = (
+  name: name,
+  type: type,
+  tabBarBadge: string,
+  isInfo: boolean
+) => {
   switch (type) {
     case "Ionicons":
       return ({ focused, color, size }) => (
-        <Ionicons name={name} size={30} color={focused ? "#0099CC" : "black"} />
+        <>
+          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
+          <Ionicons
+            name={name}
+            size={30}
+            color={focused ? "#0099CC" : "black"}
+          />
+        </>
       );
     case "AntDesign":
       return ({ focused, color, size }) => (
-        <AntDesign
-          name={name}
-          size={30}
-          color={focused ? "#0099CC" : "black"}
-        />
+        <>
+          {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
+          <AntDesign
+            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>
+  );
+};