update

src/navigation/BottomTab.js

@@ -17,6 +17,7 @@ import TabBar from "./TabBar";
 import HomeStack from "./HomeStack";
 import ChatStack from "./ChatStack";
 import SettingsStack from "./SettingsStack";
+import Library from "../screens/Library/Library.js";
 
 const bottomTabStyles = StyleSheet.create({
   icon: {
@@ -33,13 +34,13 @@ export const BottomTabScreen = () => {
     <Motion.Image
       resizeMode={"contain"}
       animate={{
-        tintColor: focused ? Palette.primary : Palette.white,
+        tintColor: focused ? Palette.white : "#8B8883",
       }}
       style={[
         bottomTabStyles.icon,
         {
-          width: "55%",
-          height: "55%",
+          width: 24,
+          height: 24,
         },
       ]}
       source={icon}
@@ -49,30 +50,53 @@ export const BottomTabScreen = () => {
   return (
     <BottomTab.Navigator tabBar={(props) => <TabBar {...props} />}>
       <BottomTab.Screen
-        name={Routes.HomeStack}
+        name={Routes.Create}
         component={HomeStack}
         options={{
+          tabBarLabel: "Créer",
           headerShown: false,
           tabBarShowLabel: true,
-          tabBarIcon: ({ focused }) => renderIcon(tabs.home, focused),
+          tabBarIcon: ({ focused }) => renderIcon(tabs.addTab, focused),
         }}
       />
       <BottomTab.Screen
-        name={Routes.ChatStack}
+        name={Routes.HitParade}
         component={ChatStack}
         options={{
+          tabBarLabel: "Hit Parade",
           headerShown: false,
           tabBarShowLabel: true,
-          tabBarIcon: ({ focused }) => renderIcon(tabs.chat, focused),
+          tabBarIcon: ({ focused }) => renderIcon(tabs.ribbon, focused),
         }}
       />
       <BottomTab.Screen
-        name={Routes.SettingsStack}
+        name={Routes.Playbacks}
         component={SettingsStack}
         options={{
+          tabBarLabel: "Playbacks",
           headerShown: false,
           tabBarShowLabel: true,
-          tabBarIcon: ({ focused }) => renderIcon(tabs.settings, focused),
+          tabBarIcon: ({ focused }) => renderIcon(tabs.mic, focused),
+        }}
+      />
+      <BottomTab.Screen
+        name={Routes.Library}
+        component={Library}
+        options={{
+          tabBarLabel: "Librairie",
+          headerShown: false,
+          tabBarShowLabel: true,
+          tabBarIcon: ({ focused }) => renderIcon(tabs.albums, focused),
+        }}
+      />
+      <BottomTab.Screen
+        name={Routes.Profile}
+        component={SettingsStack}
+        options={{
+          tabBarLabel: "Profil",
+          headerShown: false,
+          tabBarShowLabel: true,
+          tabBarIcon: ({ focused }) => renderIcon(tabs.person, focused),
         }}
       />
     </BottomTab.Navigator>