🎨 Page detail classique qui rend pas trop mauvais

components/ListItemComponent.tsx

@@ -10,8 +10,9 @@ export function ListItemComponent(props : ItemProps){
     return (
         <View>
             <Image 
-            source={{uri: props.url}}
-            style={{flex:1, minHeight:250, minWidth:180}}/>
+                source={{uri: props.url}}
+                style={{flex:1, minHeight:250, minWidth:180}}
+            />
         </View>
     )
 }

navigation/DetailStackNav.tsx

@@ -0,0 +1,17 @@
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+import ListScreen from '../screens/ListScreen';
+import DetailCard from '../screens/DetailCard';
+
+export default function DetailStackNav() {
+    const Stack = createStackNavigator();
+    return (
+        <Stack.Navigator initialRouteName="CardList">
+            <Stack.Screen name="CardList" component={ListScreen}/>
+            <Stack.Screen name="DetailCard" component={DetailCard}/>
+        </Stack.Navigator>
+    )
+}

navigation/Navigation.tsx

@@ -11,6 +11,7 @@ import ListFav from '../screens/ListFav';
 
 import TabBarIcon from '../components/TabBarIcon';
 import StackNavigation from './StackNavigation';
+import DetailStackNav from './DetailStackNav';
 
 
 
@@ -20,7 +21,7 @@ export default function Navigation() {
     return (
         <NavigationContainer>
             <BottomTabNavigator.Navigator initialRouteName="Home">
-                <BottomTabNavigator.Screen name="List" component={ListScreen}
+                <BottomTabNavigator.Screen name="List" component={DetailStackNav} 
                                             options={{
                                                 title: 'List',
                                                 tabBarIcon: ({color}) => <TabBarIcon name="th-large" color={color}/>,

redux/actions/actionSelection.tsx

@@ -60,8 +60,9 @@ export const getAllCards = () => {
         }
         //'pageSize':'100'
       };
-      //! Actualisation de l'API (16/03) :
-      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EU1AbKy9Q7sOUjQYC5AFF1O1JPuoAgCNxk', options);
+      //! Actualisation de l'API (29/03) :
+      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUrREr6QW0VZJgpRDgedTYqvX4P2BokjcC  ', options);
+      //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EUZvGOfXsMKYrjqLJp5mE7IJlhQuELMiPk  ', options);
       //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
       //console.log("FETCH")
       //console.log(CardsPromise)

screens/DetailCard.tsx

@@ -0,0 +1,62 @@
+import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from "react";
+import { Card } from '../models/Card';
+
+//* Components
+import {ListItemComponent} from '../components/ListItemComponent'
+
+//@ts-ignore
+export default function DetailMain({ route }){
+    
+    const { card, other } = route.params;
+
+    let pressed : Boolean = false
+    const [titleText, setTitleText] = useState(card.name)
+    const onPressTitle = () => {
+        pressed ? setTitleText(titleText + '\n' + 'Id : ' + card.id) : setTitleText(card.name) 
+        pressed ? pressed = false :pressed = true
+    };
+    return (
+        <View style={styles.container}>
+            <View style={styles.titleView}>
+                <Text style={styles.title} onPress={onPressTitle} >{titleText}</Text>
+            </View>
+            <View style={styles.item}>
+                <ListItemComponent url={card.img}/>
+            </View>            
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    item: {
+        borderRadius : 15,
+        backgroundColor: '#efefef',
+        padding: 15,
+        maxHeight:300,
+        maxWidth:350,
+    },
+    title: {
+        fontStyle: "italic",
+        fontSize: 20,
+    },
+    titleView: {
+        flex: 1,
+        justifyContent: 'center',
+        padding: 10,
+        backgroundColor: '#fff',
+        borderRadius : 10,
+        borderWidth: 10,
+        borderColor: '#efefef',
+        maxHeight: 100,
+    }
+});

screens/ListScreen.tsx

@@ -77,7 +77,10 @@ export default function ListScreen({navigation}){
                 numColumns={2}
                 data={filteredList} 
                 renderItem={({item}) =>
-                    <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
+                    // <TouchableHighlight onPress={() =>  ("DetailCard", {card :item})}>
+                    //     <ListItemComponent url={item.img}/>
+                    // </TouchableHighlight>
+                    <TouchableHighlight onPress={() => navigation.navigate("DetailCard", {card :item, other : 'anything'})}>
                         <ListItemComponent url={item.img}/>
                     </TouchableHighlight>
                 }