⚡ Ajout de la StackNavigation qui marche avec la BottomNavigation et création de zones d'item en fonction d'une liste ⚡

App.tsx

@@ -1,7 +1,11 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View, Button } from 'react-native';
 import React, { useState } from "react";
+
 import Navigation from './navigation/Navigation';
+import StackNavigation from './navigation/StackNavigation';
+
+import { createStackNavigator } from '@react-navigation/stack';
 
 import {
   SafeAreaView,

navigation/Navigation.tsx

@@ -10,6 +10,7 @@ import ListScreen from '../screens/ListScreen';
 import ListFav from '../screens/ListFav';
 
 import TabBarIcon from '../components/TabBarIcon';
+import StackNavigation from './StackNavigation';
 
 
 
@@ -24,14 +25,16 @@ export default function Navigation() {
                                                 title: 'List',
                                                 tabBarIcon: ({color}) => <TabBarIcon name="list" color={color}/>,
                                             }}/>
-                <BottomTabNavigator.Screen name="Home" component={HomeScreen}
+                <BottomTabNavigator.Screen name="Home" component={StackNavigation}
                                             options={{
                                                 title: 'Home',
                                                 tabBarIcon: ({color}) => <TabBarIcon name="home" color={color}/>,
-                                            }}/>
+                                                headerShown: false
+                                            }}
+                                            />
                 <BottomTabNavigator.Screen name="ListFav" component={ListFav}
                                             options={{
-                                                title: 'ListFav',
+                                                title: 'Liste de Favoris ♥',
                                                 tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
                                             }}/>
             </BottomTabNavigator.Navigator>

navigation/StackNavigation.tsx

@@ -8,16 +8,15 @@ import HomeScreen from '../screens/HomeScreen';
 import ListScreen from '../screens/ListScreen';
 import ListFav from '../screens/ListFav';
 
-
 export default function StackNavigation() {
     const Stack = createStackNavigator();
     return (
-        <NavigationContainer>
+        //<NavigationContainer>
             <Stack.Navigator initialRouteName="Home">
                 <Stack.Screen name="Home" component={HomeScreen}/>
                 <Stack.Screen name="ListScreen" component={ListScreen}/>
                 <Stack.Screen name="ListFav" component={ListFav}/>
             </Stack.Navigator>
-        </NavigationContainer>
+        //</NavigationContainer>
     )
 }

screens/HomeScreen.tsx

@@ -1,27 +1,39 @@
 
-import { StyleSheet, Text, View, Button, TouchableNativeFeedback } from 'react-native';
+import { StyleSheet, Text, View, TouchableNativeFeedback } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigation from '../navigation/StackNavigation' 
 import { Colors } from 'react-native/Libraries/NewAppScreen';
 
-export default function HomeScreen() {
+import Button from 'react-bootstrap/Button';
+
+// @ts-ignore //(ta gueule pour l'erreur sur navigation)
+export default function HomeScreen({navigation}) {
     return (
-        // <View>
+        <View style={styles.container}>
-            //<TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
+            <View style={styles.centered}>
-            //<Text>Click me !</Text>
+                <Text style={styles.title}>Mes super Nounours !</Text>
-            //</TouchableNativeFeedback>
+            </View>
-            <View style={styles.container}>
+            <Text>Mon super texte ...</Text>
-                <View style={styles.centered}>
+            {/* <MyCustomComponent /> */}
-                    <Text style={styles.title}>Mes super Nounours !</Text>
+            <View style={styles.MidArea}>
-                </View>
+                <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
-                <Text>Mon super texte ...</Text>
-                {/* <MyCustomComponent /> */}
-                <View style={styles.MidArea}>
-                    <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
-                </View>
             </View>
-        //</View>
+        
+            <View>
+                <Text style={styles.t3}> Vous cherchez une entités ? </Text>
+                <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
+                    <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
+                </TouchableNativeFeedback>
+            </View>
+
+            <View>
+                <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
+                <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
+                    <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
+                </TouchableNativeFeedback>
+            </View>
+        </View>
     )
 };
 
@@ -35,7 +47,8 @@ export default function HomeScreen() {
         alignItems: "center"
     },
     title: {
-        fontSize: 20
+        fontSize: 20,
+        fontWeight: 'bold',
     },
     MidArea: {
         justifyContent: "center",
@@ -43,9 +56,22 @@ export default function HomeScreen() {
         paddingTop: 50,
         paddingBottom: 50,
         margin: 40,
+        borderRadius: 15,
     },
     textStyle: {
         textAlign: "center",
         fontSize: 20,
+    },
+    ButtonStyle :{
+        backgroundColor: "#2E8AE6",
+        borderRadius: 15,
+        padding: 20,
+        color: "white",
+        fontSize : 20,
+        fontWeight: 'bold',
+    },
+    t3 :{
+        fontSize : 20,
+        fontWeight: 'bold',
     }
 });

screens/ListScreen.tsx

@@ -2,6 +2,42 @@
 import { StyleSheet, Text, View, Button } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
+import { FlatList } from 'react-native-gesture-handler';
+
+
+export const DATA = [
+    {
+        id: '1',
+        title: "premier élément",
+    },
+    {
+        id: '2',
+        title: "second élément",
+    },
+    {
+        id: '3',
+        title: "élément",
+    },
+    {
+        id: '4',
+        title: "Rick",
+    },
+    {
+        id: '5',
+        title: "Corentin",
+    },
+    {
+        id: '10',
+        title: "dernier élément",
+    },
+];
+
+//@ts-ignore
+const Item = ({title}) => (
+    <View style={styles.item}>
+        <Text style={styles.title}>{title}</Text>
+    </View>
+);
 
 
 export default function Main(){
@@ -14,6 +50,9 @@ export default function Main(){
                 <Text>{count}</Text>
                 <Button onPress={()=> setCount(count+1)} title="+1"/>
             </View>
+            <FlatList data={DATA}         
+            renderItem={({item}) => <Item title={item.title} />}
+            keyExtractor={item => item.id}/>
         </View>
     );
 }
@@ -38,5 +77,14 @@ const styles = StyleSheet.create({
         borderColor : '#00ffaa',
         alignItems: 'center',
         justifyContent: 'center',
+    },
+    item: {
+        borderRadius : 15,
+        backgroundColor: '#efefef',
+        padding: 20,
+        margin : 10,
+    },
+    title: {
+        fontStyle: "italic",
     }
 });