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>

src/navigation/MainStack.js

@@ -42,6 +42,9 @@ import PlaybackOnboarding from "../screens/Playback/PlaybackOnboarding";
 import Playback from "../screens/Playback/Playback";
 import RecordPlayback from "../screens/Playback/RecordPlayback";
 import RecordedPlayback from "../screens/Playback/RecordedPlayback";
+import ChooseDecor from "../screens/Playback/ChooseDecor";
+import CreatingDecor from "../screens/Playback/CreatingDecor";
+import VideoFinalize from "../screens/Playback/VideoFinalize";
 
 const screenOptions = {
   headerShown: false,
@@ -193,6 +196,18 @@ const screens = [
     name: Routes.RecordedPlayback,
     component: RecordedPlayback,
   },
+  {
+    name: Routes.ChooseDecor,
+    component: ChooseDecor,
+  },
+  {
+    name: Routes.CreatingDecor,
+    component: CreatingDecor,
+  },
+  {
+    name: Routes.VideoFinalize,
+    component: VideoFinalize,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -53,4 +53,13 @@ export const Routes = {
   Playback: "Playback",
   RecordPlayback: "RecordPlayback",
   RecordedPlayback: "RecordedPlayback",
+  ChooseDecor: "ChooseDecor",
+  CreatingDecor: "CreatingDecor",
+  VideoFinalize: "VideoFinalize",
+
+  Create: "Create",
+  HitParade: "HitParade",
+  Playbacks: "Playbacks",
+  Library: "Library",
+  Profile: "Profile",
 };

src/navigation/TabBar.js

@@ -1,9 +1,14 @@
 import React from "react";
-import { View, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 import * as Haptics from "expo-haptics";
 
 import { gutters, Palette, Style } from "../styles";
 import useLayoutType from "../hooks/useLayoutType";
+import BorderGradient from "../components/BorderGradient/BorderGradient";
+import { colors } from "react-native-swiper-flatlist/src/themes";
+import { BlurView } from "expo-blur";
+import ItemContainer from "../components/ItemContainer/ItemContainer";
+import { FONT_FAMILY } from "../styles/Fonts";
 
 const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
   const { isDesktop, windowWidth, mediumDesktopBreakpoint, isWeb } =
@@ -14,70 +19,98 @@ const TabBar = ({ state = {}, descriptors = {}, navigation = {} }) => {
       style={{
         position: "absolute",
         bottom: gutters * 2,
-        borderRadius: 500,
-        flexDirection: "row",
-        height: 60,
-        width: "60%",
+        width: "90%",
         alignSelf: "center",
-        maxWidth: isDesktop ? 200 : 220,
-        borderColor: Palette.ultraLightWhite,
-        borderWidth: 3,
-        paddingHorizontal: 1.2 * gutters,
-        backgroundColor: Palette.darkPurple,
-        ...Style.containerSpaceBetween,
-        ...Style.defaultShadows,
+        zIndex: 1,
+        justifyContent: "center",
       }}
     >
-      {state?.routes?.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const isFocused = state?.index === index;
+      <ItemContainer
+        height={64}
+        gradientProps={{
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
+        }}
+        style={{
+          height: 65,
+        }}
+      >
+        <View
+          style={{
+            ...Style.containerSpaceBetween,
+            paddingHorizontal: 4,
+            flex: 1,
+          }}
+        >
+          {state?.routes?.map((route, index) => {
+            const { options } = descriptors[route.key];
+            const isFocused = state?.index === index;
 
-        const _onPressTabBar = () => {
-          if (!isWeb) {
-            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-          }
+            const label =
+              options.tabBarLabel !== undefined
+                ? options.tabBarLabel
+                : options.title !== undefined
+                ? options.title
+                : route.name;
 
-          const event = navigation.emit({
-            type: "tabPress",
-            target: route.key,
-            canPreventDefault: true,
-          });
+            const _onPressTabBar = () => {
+              if (!isWeb) {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+              }
 
-          if (!isFocused && !event.defaultPrevented) {
-            // The `merge: true` option makes sure that the params inside the tab screen are preserved
-            navigation.navigate({ name: route.name, merge: true });
-          }
-        };
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
 
-        const onLongPress = () => {
-          navigation.emit({
-            type: "tabLongPress",
-            target: route.key,
-          });
-        };
+              if (!isFocused && !event.defaultPrevented) {
+                // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                navigation.navigate({ name: route.name, merge: true });
+              }
+            };
 
-        return (
-          !options?.hide && (
-            <TouchableOpacity
-              key={route.key}
-              style={{
-                alignSelf: "center",
-                width: `${100 / state?.routes?.length}%`,
-                height: 40,
-                ...Style.containerCenter,
-              }}
-              accessibilityRole="button"
-              accessibilityState={isFocused ? { selected: true } : {}}
-              accessibilityLabel={options.tabBarAccessibilityLabel}
-              testID={options.tabBarTestID}
-              onPress={_onPressTabBar}
-              onLongPress={onLongPress}
-            >
-              {options?.tabBarIcon({ focused: isFocused })}
-            </TouchableOpacity>
-          )
-        );
-      })}
+            const onLongPress = () => {
+              navigation.emit({
+                type: "tabLongPress",
+                target: route.key,
+              });
+            };
+
+            return (
+              !options?.hide && (
+                <TouchableOpacity
+                  key={route.key}
+                  style={{
+                    alignSelf: "center",
+                    width: `${100 / state?.routes?.length}%`,
+                    height: "100%",
+                    ...Style.containerCenter,
+                  }}
+                  accessibilityRole="button"
+                  accessibilityState={isFocused ? { selected: true } : {}}
+                  accessibilityLabel={options.tabBarAccessibilityLabel}
+                  testID={options.tabBarTestID}
+                  onPress={_onPressTabBar}
+                  onLongPress={onLongPress}
+                >
+                  {options?.tabBarIcon({ focused: isFocused })}
+                  <Text
+                    style={{
+                      fontSize: 10,
+                      color: isFocused ? Palette.white : "#8B8883",
+                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                      marginTop: 2,
+                    }}
+                  >
+                    {label}
+                  </Text>
+                </TouchableOpacity>
+              )
+            );
+          })}
+        </View>
+      </ItemContainer>
     </View>
   );
 };