Realization of a floating navigation bar ✅

src/FLAD/App.tsx

@@ -7,7 +7,7 @@ export default function App() {
   return (
     
     <SafeAreaProvider>
-    {/* <Navigation/> */}
+      {/* <Navigation/> */}
       <StartNavigation/>
     </SafeAreaProvider>
 

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%',

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>
   )

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
     }
 });