Realized Navigation tabbar and i structured the tree structure of images and files

src/FLAD/App.tsx

@@ -2,8 +2,10 @@ import { StatusBar } from 'expo-status-bar';
 import { useState, useTransition } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 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,12 +41,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
       ))}
     </View>*/
 
-    <View style={{backgroundColor: '#141414'}}>
+    <Navigation/>
-      <SafeAreaProvider>
-        <Navigation>
-        </Navigation>
-      </SafeAreaProvider>
-    </View>
 
 
 
@@ -68,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/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

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

src/FLAD/navigation/Navigation.tsx

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

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/screens/favoritePage.tsx

@@ -1,29 +1,32 @@
 import React, {Component} from 'react';
-import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
+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() {
-    export const MUSIC_LIST : Music[] = [
+    const MUSIC_LIST : Music[] = [
-        new Music("La pharmacie", "Jul",require("../assets/Images/jul.png")),
+        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>
+        <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>
+            <ScrollView style={styles.scroll}>
                 <View>
                     <FlatList
                         data={MUSIC_LIST}
                         renderItem={({ item }) => (
-                            <TouchableHighlight onPress={() => navigation.navigate("")}>
+                            //<TouchableHighlight onPress={() => navigation.navigate("")}>
-                                <CardMusic image="{item.image}" title="{item.title}" description="{item.bio}"/>
+                                <CardMusic image={item.image} title={item.title} description={item.bio}/>
-                            </TouchableHighlight>
+                            //</TouchableHighlight>
                         )}
                         keyExtractor={(item: Music) => item.title }
                       />
@@ -34,6 +37,9 @@ export default function favoritePage() {
 };
 
 const styles = StyleSheet.create({
+    body: {
+        backgroundColor: "#141414"
+    },
     titleContainer: {
         marginLeft: 20,
         marginVertical: 50,
@@ -48,4 +54,7 @@ const styles = StyleSheet.create({
         fontSize: 18,
         color: '#787878',
     },
+    scroll: {
+        marginBottom: 120,
+    }
 });