src/FLAD/App.tsx

@@ -1,9 +1,11 @@
 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'
+import { cards as cardArray } from './data/data'
-
+import Navigation from './navigation/Navigation';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 export default function App() {
 //  const [currentCard, setCurrentCard] = useState(cardArray);
@@ -24,7 +26,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
 };
 
 // const [currentCard, setCurrentCard] = useState(0);
-
+const Stack = createBottomTabNavigator();
   return (
 
     /*<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',  position : 'absolute', backgroundColor : '' }}>
@@ -39,9 +41,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
       ))}
     </View>*/
 
-    <View style={{backgroundColor: '#141414'}}>
+    <Navigation/>
-      <FavoritePage/>
-    </View>
 
 
 
@@ -65,23 +65,4 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
   );
 }
 
-const styles = StyleSheet.create({
+
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  card: {
-    borderRadius : 8,
-    shadowRadius : 20,
-    shadowColor : '#'
-  },
-  image: {
-    width: 320,
-    height: 440,
-    borderRadius: 18,
-    resizeMode : "cover",
-    placeholder: "assets/images/loadingPlaceholder.gif"
-  },
-});

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/components/CardMusic.tsx

@@ -2,16 +2,17 @@ import React, {Component} from 'react';
 import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native';
 
 type CustomCardMusic = { //Props
-    image: any;
+    image: ImageSource;
     title: string;
     description: string;
 }
 
 export default function CardMusic(CBP: CustomCardMusic) {
+    const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
     return (
       <View style={styles.container}>
           <View style={styles.imageContainer}>
-              <Image source={require('../assets/jul.png')} style={styles.image}/>
+              <Image source={source} style={styles.image}/>
           </View>
           <View style={styles.textContainer}>
               <Text style={styles.title}>{CBP.title}</Text>

src/FLAD/model/Music.ts

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

src/FLAD/navigation/Navigation.tsx

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import Home from '../screens/spot';
+import FavoritePage from '../screens/favoritePage';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+export default function StackNavigation() {
+    const Stack = createBottomTabNavigator();
+    return (
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home"
+        screenOptions={{
+          
+        }}>
+          <Stack.Screen 
+            name="Home" 
+            component={FavoritePage} 
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen 
+            name="Favoris" 
+            component={FavoritePage} 
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen 
+            name="Settings" 
+            component={FavoritePage} 
+            options={{ headerShown: false }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    )
+  }
+

src/FLAD/package.json

@@ -9,8 +9,10 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@react-navigation/native": "^6.1.2",
+    "@react-navigation/bottom-tabs": "^6.5.4",
+    "@react-navigation/native": "^6.1.3",
     "@react-navigation/native-stack": "^6.9.8",
+    "@react-navigation/stack": "^6.3.12",
     "expo": "~47.0.12",
     "expo-cli": "^6.2.1",
     "expo-status-bar": "~1.4.2",

src/FLAD/pages/favoritePage.tsx

@@ -1,41 +0,0 @@
-import React, {Component} from 'react';
-import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
-import Card from '../components/Card';
-import CardMusic from '../components/CardMusic';
-
-
-export default function favoritePage() {
-    return (
-        <View>
-            <View style={styles.titleContainer}>
-                <Text style={styles.title}>Favoris</Text>
-                <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
-            </View>
-            <ScrollView>
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
-                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
-                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
-            </ScrollView>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    titleContainer: {
-        marginLeft: 20,
-        marginVertical: 50,
-    },
-    title: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: 'white',
-    },
-    description: {
-        marginTop: 10,
-        fontSize: 18,
-        color: '#787878',
-    },
-});

src/FLAD/screens/favoritePage.tsx

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native';
+import Card from '../components/Card';
+import CardMusic from '../components/CardMusic';
+import Music from '../model/Music'
+
+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("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")),
+      ]
+    return (
+        <View style={styles.body}>
+            <View style={styles.titleContainer}>
+                <Text style={styles.title}>Favoris</Text>
+                <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
+            </View>
+            <ScrollView style={styles.scroll}>
+                <View>
+                    <FlatList
+                        data={MUSIC_LIST}
+                        renderItem={({ item }) => (
+                            //<TouchableHighlight onPress={() => navigation.navigate("")}>
+                                <CardMusic image={item.image} title={item.title} description={item.bio}/>
+                            //</TouchableHighlight>
+                        )}
+                        keyExtractor={(item: Music) => item.title }
+                      />
+                </View>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    body: {
+        backgroundColor: "#141414"
+    },
+    titleContainer: {
+        marginLeft: 20,
+        marginVertical: 50,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: 'white',
+    },
+    description: {
+        marginTop: 10,
+        fontSize: 18,
+        color: '#787878',
+    },
+    scroll: {
+        marginBottom: 120,
+    }
+});