add debut stack navigation non fonctionnelle

App.js

@@ -1,17 +1,13 @@
 import {SafeAreaView, StyleSheet} from 'react-native';
-import Navigation from "./componente/NavigationBar";
+import React from "react";
-
+import BottomTabNavigator from "@react-navigation/bottom-tabs/src/navigators/createBottomTabNavigator";
-import ArtistCard from './componente/ArtistCard';
-import ArtistPage from "./componente/ArtistePage";
 
 export default function App() {
-  //<ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
+    return (
-    //        <ArtistPage name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-  return (
     <>
         <SafeAreaView style={styles.topSafeArea}/>
         <SafeAreaView style={styles.mainSafeArea}>
-            <Navigation/>
+            <BottomTabNavigator/>
         </SafeAreaView>
     </>
   );

Model/Artist.tsx

@@ -0,0 +1,26 @@
+export class Artist {
+    private _name: string;
+    private _image: string;
+
+    constructor(name: string, image: string) {
+        this._name = name;
+        this._image = image;
+    }
+
+
+    public get name(): string {
+        return this._name;
+    }
+
+    public set name(value: string) {
+        this._name = value;
+    }
+
+    get image(): string {
+        return this._image;
+    }
+
+    set image(value: string) {
+        this._image = value;
+    }
+}

componente/Artist/ArtistCard.tsx

@@ -1,11 +1,13 @@
+// @ts-ignore
 import React from 'react';
-import { View, Image, Text, StyleSheet } from 'react-native';
+import {View, Image, Text, StyleSheet} from 'react-native';
+
+const ArtistCard = ({ item }) => {
 
-const ArtistCard = ({ imageUri, name }) => {
     return (
         <View style={styles.container}>
-            <Image source={{ uri: imageUri }} style={styles.image}/>
+            <Image source={{ uri: item.image }} style={styles.image}/>
-            <Text style={styles.name}>{name}</Text>
+            <Text style={styles.name}>{item.name}</Text>
         </View>
     );
 };

componente/Artist/ArtistList.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import {Alert, FlatList, TouchableNativeFeedback} from "react-native";
+import ArtistCard from "./ArtistCard";
+import StackNavigation from "../StackNavigation";
+import {useNavigation} from "@react-navigation/native";
+
+export class Artist {
+    private _name: string;
+    private _image: string;
+
+    constructor(name: string, image: string) {
+        this._name = name;
+        this._image = image;
+    }
+
+    public get name(): string {
+        return this._name;
+    }
+
+    public set name(value: string) {
+        this._name = value;
+    }
+
+    get image(): string {
+        return this._image;
+    }
+
+    set image(value: string) {
+        this._image = value;
+    }
+}
+
+const ARTISTS_LIST: Artist[] = [
+    new Artist("Eminem", "https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"),
+    new Artist("Kendrick Lamar", "https://images.genius.com/d6d96651b423fa5a83c38ee2a4c6c939.1000x1000x1.jpg"),
+    new Artist("J. Cole", "https://images.genius.com/84a98a8d26b13b7311aa2359ebade757.1000x1000x1.jpg"),
+];
+
+const ArtistList = ({navigation}) => {
+    return (
+        <FlatList data={ARTISTS_LIST} renderItem={({item}) =>
+            <TouchableNativeFeedback onPress={() => {
+                Alert.alert('You tapped the button!');
+                navigation.navigate("ArtistDetail");
+            }}>
+                <ArtistCard item={item}/>
+            </TouchableNativeFeedback>
+        } keyExtractor={(item: Artist) => item.name}/>
+    );
+};
+
+export default ArtistList;
+
+

componente/Artist/ArtistePage.tsx

@@ -1,11 +1,13 @@
+// @ts-ignore
 import React from 'react';
 import { View, Image, Text, StyleSheet } from 'react-native';
 
-const ArtistPage = ({ name, imageUri }) => {
+export default function ArtistPage({ route }) {
+    const artist = route.param.artist;
     return (
         <View style={styles.container}>
-            <Image source={{ uri: imageUri }} style={styles.image} />
+            <Image source={{ uri: artist.imageUri }} style={styles.image} />
-            <Text style={styles.name}>{name}</Text>
+            <Text style={styles.name}>{artist.name}</Text>
         </View>
     );
 };
@@ -29,6 +31,4 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         textAlign: 'center',
     },
-});
+});
-
-export default ArtistPage;

componente/HomePage.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import ArtistCard from "./ArtistCard";
-
-const HomePage = () => {
-    return (
-        <View style={styles.container}>
-            <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-            <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-            <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-            <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-            <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}/>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        marginTop:40,
-        marginLeft:20
-    },
-    name: {
-        fontSize: 20,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-});
-
-export default HomePage;

componente/HomePage.tsx

@@ -0,0 +1,26 @@
+// @ts-ignore
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import ArtistList from "./Artist/ArtistList";
+
+const HomePage = ({navigation}) => {
+    return (
+        <View style={styles.container}>
+            <ArtistList navigation={navigation}/>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop:40,
+        marginLeft:20
+    },
+    name: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+});
+
+export default HomePage;

componente/NavigationBar.tsx

@@ -1,17 +1,16 @@
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {NavigationContainer} from "@react-navigation/native";
-import ArtistPage from "./ArtistePage";
 import {AntDesign, Ionicons} from '@expo/vector-icons';
-import {StyleSheet} from "react-native";
 import SettingsPage from "./SettingsPage";
 import HomePage from "./HomePage";
+import StackNavigation from "./StackNavigation";
 
-export default function Navigation() {
+export default function NavigationBar() {
     const BottomTabNavigator = createBottomTabNavigator();
     return (
         <NavigationContainer>
             <BottomTabNavigator.Navigator initialRouteName="Home">
-                <BottomTabNavigator.Screen name="Home" component={HomePage} options={{
+                <BottomTabNavigator.Screen name="Home" component={StackNavigation} options={{
                     title: 'Home',
                     tabBarIcon: () => (<AntDesign name="home" size={24} color="black" />)
                 }}/>

componente/StackNavigation.tsx

@@ -0,0 +1,21 @@
+// @ts-ignore
+import React from "react";
+import {NavigationContainer} from "@react-navigation/native";
+import {createStackNavigator} from "@react-navigation/stack";
+import SettingsPage from "./SettingsPage";
+import HomePage from "./HomePage";
+import ArtistePage from "./Artist/ArtistePage";
+import NavigationBar from "./NavigationBar";
+
+const Stack = createStackNavigator();
+
+export default function StackNavigation() {
+    return (
+        <NavigationContainer>
+            <Stack.Navigator initialRouteName="ArtistList">
+                <Stack.Screen name="Home" component={HomePage}/>
+                <Stack.Screen name="ArtistDetail" component={ArtistePage}/>
+            </Stack.Navigator>
+        </NavigationContainer>
+    )
+}

package-lock.json

@@ -13,6 +13,7 @@
         "@extra-fs/promises": "^3.1.4",
         "@react-navigation/bottom-tabs": "^6.5.7",
         "@react-navigation/native": "^6.1.6",
+        "@react-navigation/stack": "^6.3.16",
         "@reduxjs/toolkit": "^1.9.3",
         "expo": "^48.0.5",
         "expo-cli": "^6.3.2",
@@ -25,7 +26,9 @@
         "redux": "^4.2.1"
       },
       "devDependencies": {
-        "@babel/core": "^7.12.9"
+        "@babel/core": "^7.12.9",
+        "@types/react-native": "^0.71.3",
+        "typescript": "^4.9.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1803,6 +1806,18 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/apple-utils": {
       "version": "0.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/@expo/apple-utils/-/apple-utils-0.0.0-alpha.37.tgz",
@@ -5336,6 +5351,24 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@react-navigation/stack": {
+      "version": "6.3.16",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.16.tgz",
+      "integrity": "sha512-KTOn9cNuZ6p154Htbl2DiR95Wl+c7niLPRiGs7gjOkyVDGiaGQF9ODNQTYBDE1OxZGHe/EyYc6T2CbmiItLWDg==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.17",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
@@ -5535,6 +5568,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "peer": true
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -5636,6 +5675,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-native": {
+      "version": "0.71.3",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.71.3.tgz",
+      "integrity": "sha512-0Uqw1YZ0qbVla0MMWFTANFm6W8KYWNvGQmYfucdecbXivLMcQ2v4PovuYFKr7bE6Bc5nDCUEaga962Y8gcDF7A==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -16322,6 +16370,23 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
+      "integrity": "sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==",
+      "peer": true,
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gradle-plugin": {
       "version": "0.71.15",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
@@ -18541,6 +18606,19 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",
@@ -21639,6 +21717,15 @@
       "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
       "optional": true
     },
+    "@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "requires": {
+        "@types/hammerjs": "^2.0.36"
+      }
+    },
     "@expo/apple-utils": {
       "version": "0.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/@expo/apple-utils/-/apple-utils-0.0.0-alpha.37.tgz",
@@ -24342,6 +24429,16 @@
         "nanoid": "^3.1.23"
       }
     },
+    "@react-navigation/stack": {
+      "version": "6.3.16",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.16.tgz",
+      "integrity": "sha512-KTOn9cNuZ6p154Htbl2DiR95Wl+c7niLPRiGs7gjOkyVDGiaGQF9ODNQTYBDE1OxZGHe/EyYc6T2CbmiItLWDg==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.17",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      }
+    },
     "@reduxjs/toolkit": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
@@ -24517,6 +24614,12 @@
         "@types/node": "*"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
+      "peer": true
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -24618,6 +24721,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-native": {
+      "version": "0.71.3",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.71.3.tgz",
+      "integrity": "sha512-0Uqw1YZ0qbVla0MMWFTANFm6W8KYWNvGQmYfucdecbXivLMcQ2v4PovuYFKr7bE6Bc5nDCUEaga962Y8gcDF7A==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -32829,6 +32941,19 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-gesture-handler": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
+      "integrity": "sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==",
+      "peer": true,
+      "requires": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-gradle-plugin": {
       "version": "0.71.15",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
@@ -34532,6 +34657,12 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
     },
+    "typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true
+    },
     "ua-parser-js": {
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.34.tgz",

package.json

@@ -14,6 +14,7 @@
     "@extra-fs/promises": "^3.1.4",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
+    "@react-navigation/stack": "^6.3.16",
     "@reduxjs/toolkit": "^1.9.3",
     "expo": "^48.0.5",
     "expo-cli": "^6.3.2",
@@ -21,12 +22,14 @@
     "fs-promise": "^2.0.3",
     "react": "18.2.0",
     "react-native": "0.71.3",
+    "react-native-safe-area-context": "4.5.0",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1",
+    "redux": "^4.2.1"
-    "react-native-safe-area-context": "4.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.12.9",
+    "@types/react-native": "^0.71.3",
+    "typescript": "^4.9.4"
   },
   "private": true
 }