From dc71def8518427c01ea2dbf6b68438adc9aa1438 Mon Sep 17 00:00:00 2001
From: Emre <Emre.kartal@etu.uca.fr>
Date: Sun, 19 Feb 2023 21:12:26 +0100
Subject: [PATCH] Realization of a floating navigation bar :white_check_mark:

---
 src/FLAD/App.tsx                   |  2 +-
 src/FLAD/components/CardMusic.tsx  |  5 +++--
 src/FLAD/navigation/Navigation.tsx | 30 +++++++++++++++++++++++++++---
 src/FLAD/screens/favoritePage.tsx  |  6 ++++--
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx
index 3614a4f..ada21a1 100644
--- a/src/FLAD/App.tsx
+++ b/src/FLAD/App.tsx
@@ -7,7 +7,7 @@ export default function App() {
   return (
     
     <SafeAreaProvider>
-    {/* <Navigation/> */}
+      {/* <Navigation/> */}
       <StartNavigation/>
     </SafeAreaProvider>
 
diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx
index 68563fb..3563a05 100644
--- a/src/FLAD/components/CardMusic.tsx
+++ b/src/FLAD/components/CardMusic.tsx
@@ -27,14 +27,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    margin: 20
+    marginBottom: 15
   },
   imageContainer: {
     width: 80,
     height: 80,
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 20
+    marginRight: 20,
+    marginLeft: 20
   },
   image: {
     width: '100%',
diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx
index 150ab17..24b51d9 100644
--- a/src/FLAD/navigation/Navigation.tsx
+++ b/src/FLAD/navigation/Navigation.tsx
@@ -12,16 +12,40 @@ export default function Navigation() {
       primary: 'rgb(255, 45, 85)',
       card: 'rgb(35, 33, 35)',
       border: 'rgb(35, 33, 35)',
-    },
+      text: 'rgb(255, 255, 255)',
+    }
   };
   return (
       <NavigationContainer theme={MyTheme}>
-          <BottomTabNavigator.Navigator initialRouteName="Home">
-              <BottomTabNavigator.Screen name="Home" component={FavoriteNavigation}
+          <BottomTabNavigator.Navigator 
+            initialRouteName="Spots" 
+            screenOptions={{
+              //tabBarShowLabel: false, //to remove the titles under the icons
+              tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 90, marginHorizontal: 25},
+              tabBarIconStyle: { marginBottom: -20 },
+              tabBarLabelStyle: { bottom: '-70%' }
+              
+            }}>
+              <BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation}
                         options={{ 
                             headerShown: false,
                             tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
                          }}/>
+              <BottomTabNavigator.Screen name="Favories" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                         }}/>
+              <BottomTabNavigator.Screen name="Messages" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="comment" color={color}/>,
+                         }}/>
+              <BottomTabNavigator.Screen name="Paramètres" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="cog" color={color}/>,
+                         }}/>
           </BottomTabNavigator.Navigator>
       </NavigationContainer>
   )
diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx
index e336e83..c631a7d 100644
--- a/src/FLAD/screens/favoritePage.tsx
+++ b/src/FLAD/screens/favoritePage.tsx
@@ -7,10 +7,12 @@ export default function favoritePage() {
     const MUSIC_LIST : Music[] = [
         new Music("La pharmacie", "Jul",require("../assets/images/jul.png")),
         new Music("Deux frères", "PNL", require("../assets/images/pnl.png")),
+        new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
         new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"),
         new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"),
         new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"),
-        new Music("Blanka", "PNL", require("../assets/images/pnl.png"))
+        new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
+        new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
       ]
     return (
         <View style={styles.body}>
@@ -37,6 +39,7 @@ export default function favoritePage() {
 
 const styles = StyleSheet.create({
     body: {
+        flex: 1,
         backgroundColor: "#141414"
     },
     titleContainer: {
@@ -54,7 +57,6 @@ const styles = StyleSheet.create({
         color: '#787878',
     },
     scroll: {
-        marginBottom: 120,
         marginTop: -30
     }
 });