ui/bottom-navigation (#130)

* feat(front): add safe area for mobile * fix(front): reduce safe area size * fix(front): remove padding bottom from safe area and resize bottom nav * style: updated color palette * refactor: moved Button colors inside color palette * feat: integrated tabs from Figma mockup * refactor: optimized code by propagating props and fixed color palette * refactor: deleted useless pages and moved SafeAreaProvider and IconContextProvider inside root layout instead of tabs root layout * fix: annoying scroll issue --------- Co-authored-by: MAXOUXAX <[email protected]>
datsmysong · Apr 4, 2024 · b73e1bc · b73e1bc
1 parent 047fe65
commit b73e1bc
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 81 deletions.
diff --git a/expo/app/(tabs)/_layout.tsx b/expo/app/(tabs)/_layout.tsx
@@ -1,12 +1,14 @@
 import { Redirect, Tabs } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
-import House from "phosphor-react-native/src/icons/House";
+import HouseLine from "phosphor-react-native/src/icons/HouseLine";
 import MusicNote from "phosphor-react-native/src/icons/MusicNote";
 import User from "phosphor-react-native/src/icons/User";
 import Users from "phosphor-react-native/src/icons/Users";
-import { useColorScheme } from "react-native";
+import { ActivityIndicator } from "react-native";
 
 import { Text } from "../../components/Tamed";
+import { View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
 import { useSupabaseUserHook } from "../../lib/useSupabaseUser";
 
 WebBrowser.maybeCompleteAuthSession();
@@ -19,40 +21,63 @@ function TabBarLabel(props: {
   return (
     <Text
       style={{
-        // color: props.color,
-        fontWeight: props.focused ? "bold" : "normal",
+        color: props.color,
         fontSize: 20,
-        fontFamily: "Outfit-Regular",
+        fontFamily: props.focused ? "Outfit-Bold" : "Outfit-Medium",
       }}
     >
       {props.children}
     </Text>
   );
 }
 export default function TabLayout() {
-  WebBrowser.maybeCompleteAuthSession(); // required for web only
-
-  const colorScheme = useColorScheme();
+  // This is only required for web
+  // This is used to close the authentication popup on web
+  WebBrowser.maybeCompleteAuthSession();
 
   const user = useSupabaseUserHook();
 
-  if (user === undefined) return <Text>Loading..</Text>;
+  if (user === undefined)
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 16,
+        }}
+      >
+        <ActivityIndicator size={64} color={Colors.light.text} />
+        <Text style={{ textAlign: "center" }}>
+          Chargement de l'application en cours...
+        </Text>
+      </View>
+    );
 
   if (!user) return <Redirect href="/auth/" />;
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: Colors.light.tabIconSelected,
+        tabBarInactiveTintColor: Colors.light.tabIconDefault,
         tabBarStyle: {
-          height: 100,
+          height: 87,
+          overflow: "hidden",
+        },
+        tabBarLabelPosition: "below-icon",
+        tabBarIconStyle: {
+          minHeight: 32,
+          minWidth: 32,
         },
         tabBarItemStyle: {
           flexDirection: "column",
-          height: 85,
+          height: 87,
           display: "flex",
           paddingHorizontal: 4,
-          paddingVertical: 10,
+          paddingTop: 10,
+          gap: 10,
+          justifyContent: "center",
           alignItems: "center",
         },
       }}
@@ -62,13 +87,13 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Accueil",
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <House size={32} weight={focused ? "fill" : "regular"} />
+            <HouseLine
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
@@ -77,27 +102,27 @@ export default function TabLayout() {
         options={{
           title: "Salles",
           headerShown: false,
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <MusicNote size={32} weight={focused ? "fill" : "regular"} />
+            <MusicNote
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
       <Tabs.Screen
         name="Friends"
         options={{
           title: "Amis",
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <Users size={32} weight={focused ? "fill" : "regular"} />
+            <Users
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
@@ -106,13 +131,13 @@ export default function TabLayout() {
         options={{
           title: "Profil",
           headerShown: false,
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <User size={32} weight={focused ? "fill" : "regular"} />
+            <User
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />

diff --git a/expo/app/AddMusic.tsx b/expo/app/AddMusic.tsx
diff --git a/expo/app/_layout.tsx b/expo/app/_layout.tsx
@@ -1,10 +1,13 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack, router } from "expo-router";
+import { IconContext } from "phosphor-react-native/src/lib";
 import { useEffect } from "react";
 import { MenuProvider } from "react-native-popup-menu";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { Text, View } from "../components/Themed";
+import Colors from "../constants/Colors";
 import { supabase } from "../lib/supabase";
 
 export const unstable_settings = {
@@ -78,14 +81,28 @@ function RootLayoutNav() {
           borderRadius: 40,
         }}
       >
-        <MenuProvider>
-          <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen name="auth" options={{ headerShown: false }} />
-            <Stack.Screen name="modal" options={{ presentation: "modal" }} />
-            <Stack.Screen name="ask-name" options={{ headerShown: false }} />
-          </Stack>
-        </MenuProvider>
+        <IconContext.Provider
+          value={{
+            color: Colors.light.text,
+            size: 32,
+            weight: "regular",
+          }}
+        >
+          <SafeAreaProvider
+            style={{ backgroundColor: Colors.light.background }}
+          >
+            <MenuProvider>
+              <Stack>
+                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                <Stack.Screen name="auth" options={{ headerShown: false }} />
+                <Stack.Screen
+                  name="ask-name"
+                  options={{ headerShown: false }}
+                />
+              </Stack>
+            </MenuProvider>
+          </SafeAreaProvider>
+        </IconContext.Provider>
       </View>
     </View>
   );

diff --git a/expo/app/modal.tsx b/expo/app/modal.tsx
diff --git a/expo/components/Button.tsx b/expo/components/Button.tsx
@@ -11,15 +11,16 @@ import {
 } from "react-native";
 
 import { Text } from "./Tamed";
+import Colors from "../constants/Colors";
 
 const BUTTON_COLORS = ["primary", "success", "danger"] as const;
 
 type ButtonColor = (typeof BUTTON_COLORS)[number];
 
 const COLOR_PALETTE: Record<ButtonColor, string> = {
-  primary: "#1A1A1A",
-  success: "#13863C",
-  danger: "#F33F33",
+  primary: Colors.light.text,
+  success: Colors.light.success,
+  danger: Colors.light.danger,
 };
 
 export type ButtonProps = {

diff --git a/expo/constants/Colors.ts b/expo/constants/Colors.ts
@@ -1,19 +1,15 @@
 const tintColorLight = "#2f95dc";
-const tintColorDark = "#fff";
+const fakeBlack = "#1A1A1A";
 
 export default {
   light: {
-    text: "#000",
+    success: "#13863C",
+    danger: "#F33F33",
+    text: fakeBlack,
+    black: fakeBlack,
     background: "#f2f2f2",
     tint: tintColorLight,
-    tabIconDefault: "#ccc",
-    tabIconSelected: tintColorLight,
-  },
-  dark: {
-    text: "#fff",
-    background: "#000",
-    tint: tintColorDark,
-    tabIconDefault: "#ccc",
-    tabIconSelected: tintColorDark,
+    tabIconDefault: fakeBlack,
+    tabIconSelected: fakeBlack,
   },
 };