Add Navigation and FlatList for Favorite Page

src/FLAD/App.tsx

@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import { useState, useTransition } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import FavoritePage from './pages/favoritePage';
+import FavoritePage from './screens/favoritePage';
 import { cards as cardArray } from './FakeData/data'
 
  
@@ -40,7 +40,10 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
     </View>*/
 
     <View style={{backgroundColor: '#141414'}}>
-      <FavoritePage/>
+      <SafeAreaProvider>
+        <Navigation>
+        </Navigation>
+      </SafeAreaProvider>
     </View>
 
 

src/FLAD/app.json

@@ -4,10 +4,10 @@
     "slug": "FLAD",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/icons/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/icons/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#141414"
     },
@@ -22,12 +22,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/icons/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/icons/favicon.png"
     }
   }
 }

src/FLAD/model/Music.ts

@@ -0,0 +1,35 @@
+export class Music {
+  private _name: string;
+  private _bio: string;
+  private _image: ImageSource;
+
+  constructor(title: string, bio: string, image: any) {
+    this._title = name;
+    this._bio = bio;
+    this._image = image;
+  }
+
+  get title(): string {
+    return this._title;
+  }
+
+  set title(value: string) {
+    this._title = value;
+  }
+
+  get bio(): string {
+    return this._latitude;
+  }
+
+  set bio(value: string) {
+    this._latitude = value;
+  }
+
+  get image(): any {
+    return this._image;
+  }
+
+  set image(value: any) {
+    this._image = value;
+  }
+}

src/FLAD/navigation/Navigation.tsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import { NavigationContainer } from 'react-native';
+
+export default function Navigation() {
+    const BottomTabNavigator = createBottomTabNavigator();
+    return (
+        <NavigationContainer>
+            <BottomTabNavigator.Navigator initialRouteName="Favorite">
+                <BottomTabNavigator.Screen name="Home" component={Home}
+                                           options={{
+                                               title: 'Home',
+                                               tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
+                                           }}/>
+                <BottomTabNavigator.Screen name="Favoris" component={Favorite}
+                                           options={{
+                                               title: 'Favoris',
+                                               tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
+                                           }}/>
+            </BottomTabNavigator.Navigator>
+        </NavigationContainer>
+    )
+}
+
+function TabBarIcon(props: {
+    name: React.ComponentProps<typeof FontAwesome>['name'];
+    color: string;
+}) {
+    return <FontAwesome size={30} {...props} />;
+}

src/FLAD/screens/favoritePage.tsx

@@ -5,6 +5,11 @@ import CardMusic from '../components/CardMusic';
 
 
 export default function favoritePage() {
+    export 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("Blanka", "PNL", require("../assets/images/pnl.png")),
+      ]
     return (
         <View>
             <View style={styles.titleContainer}>
@@ -12,12 +17,17 @@ export default function favoritePage() {
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
             <ScrollView>
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                <View>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                    <FlatList
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                        data={MUSIC_LIST}
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                        renderItem={({ item }) => (
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                            <TouchableHighlight onPress={() => navigation.navigate("")}>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                                <CardMusic image="{item.image}" title="{item.title}" description="{item.bio}"/>
+                            </TouchableHighlight>
+                        )}
+                        keyExtractor={(item: Music) => item.title }
+                      />
+                </View>
             </ScrollView>
         </View>
     );