Add first Async Storage

data/stub.ts

@@ -4,9 +4,8 @@ export class StubLib {
     
     public getCards(): Card[] {
         const NOUNOURS_LIST : Card[] = [
-            new Card("c1","Chewie"),
-            new Card("r2","Rupert"),
-            new Card("a3","Ronflex"),
+            
+            
         ]
         return NOUNOURS_LIST
     }

models/Card.tsx

@@ -1,13 +1,16 @@
 import {isValidNumber} from "react-native-gesture-handler/lib/typescript/web_hammer/utils";
+import {CardSet} from "./CardSet";
+import {Type} from "./Type";
+import {Classe} from "./Classe";
 
 export class Card {
 
-    constructor(id: string,name :string,set : string,type : string,faction : string,rarity : string,cost : number,attack : number, health : number, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string, img : string, imgGold : string) {
+    constructor(id: number,name :string,set : CardSet,type : Type,clas : Classe,rarity : string,cost : number,attack : number, health : number, desc : string,flavor : string,artist : string,collectible : boolean,elite : boolean,race : string, img : string, imgGold : string, cropImg :string) {
         this._id=id
         this._name=name
         this._set=set
         this._type=type
-        this._faction=faction
+        this._class=clas
         this._rarity=rarity
         this._cost=cost
         this._attack = attack
@@ -16,17 +19,16 @@ export class Card {
         this._flavor = flavor
         this._artist = artist
         this._collectible = collectible
-        this._elite = elite
-        this._race = race
         this._img = img
         this._imgGold = imgGold
+        this._cropImg = cropImg
 
     }
 
     // ID //
 
-    private _id : string;
-        get id(): string {
+    private _id : number;
+        get id(): number {
             return this._id
         }
 
@@ -40,30 +42,30 @@ export class Card {
         }
 
 
-    private _set : string;
-        get set(): string{
+    private _set : CardSet;
+        get set(): CardSet{
             return this._set
         }
 
-        set set(value : string){
+        set set(value : CardSet){
             this._set = value
         }
 
-    private _type : string;
-        get type():string{
+    private _type : Type;
+        get type():Type{
             return this._type
         }
-        set type(value : string){
+        set type(value : Type){
             this._type=value
         }
 
-    private _faction : string;
+    private _class : Classe;
 
-    get faction():string{
-        return this._faction
+    get class():Classe{
+        return this._class
     }
-    set faction(value : string){
-        this._faction=value
+    set class(value : Classe){
+        this._class=value
     }
     private _rarity : string
 
@@ -128,22 +130,6 @@ export class Card {
     set collectible(value: boolean ){
         this._collectible = value;
     }
-    private _elite : boolean
-    get elite(): boolean {
-        return this._elite;
-    }
-    set elite(value: boolean) {
-        this._elite = value ;
-    }
-
-    private _race : string
-    get race(): string {
-        return this._race;
-    }
-    set race(value: string) {
-        this._race = value ;
-    }
-
 
     private _img : string
 
@@ -161,5 +147,12 @@ export class Card {
         set imgGold(value: string) {
             this._imgGold = value ;
         }
+    private _cropImg : string
 
+    get cropImg(): string {
+        return this._cropImg;
+    }
+    set cropImg(value: string) {
+        this._cropImg = value;
+    }
 }

models/CardSet.tsx

@@ -0,0 +1,37 @@
+
+export class CardSet {
+
+    constructor(id: number,name : string, type : string ) {
+        this._id = id
+        this._name =name
+        this._type = type
+
+    }
+
+    private _id : number
+
+    get id(): number {
+        return this._id
+    }
+
+    // NAME //
+    private _name : string;
+    get name(): string {
+        return this._name;
+    }
+    set name(value: string) {
+        this._name = value;
+    }
+
+    private _type : string;
+    get type(): string {
+        return this._type;
+    }
+    set type(value: string) {
+        this._type = value;
+    }
+
+
+
+
+}

models/Classe.tsx

@@ -0,0 +1,4 @@
+export class Classe {
+    constructor(private id : number, private  name : string) {
+    }
+}

models/Type.tsx

@@ -0,0 +1,5 @@
+export class Type{
+
+    constructor(private id : number, private name : string) {
+    }
+}

navigation/ListNavigator.tsx

@@ -1,21 +1,21 @@
 
 
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+// import { NavigationContainer } from '@react-navigation/native';
+// import { createStackNavigator } from '@react-navigation/stack';
 
-import HomeScreen from '../screens/HomeScreen';
-import ListScreen from '../screens/ListScreen';
-import ListFav from '../screens/ListFav';
+// import HomeScreen from '../screens/HomeScreen';
+// import ListScreen from '../screens/ListScreen';
+// import ListFav from '../screens/ListFav';
 
 
 
 
-export default function ListNavigator() {
-    const Stack = createStackNavigator();
-    return (
-        <Stack.Navigator initialRouteName="List">
-        <Stack.Screen name="List" component={ListScreen}/>
-        <Stack.Screen name="ListFav" component={ListFav}/>
-        </Stack.Navigator>
-    )
-}
+// export default function ListNavigator() {
+//     const Stack = createStackNavigator();
+//     return (
+//         <Stack.Navigator initialRouteName="List">
+//         <Stack.Screen name="List" component={ListScreen}/>
+//         <Stack.Screen name="ListFav" component={ListFav}/>
+//         </Stack.Navigator>
+//     )
+// }

navigation/Navigation.tsx

@@ -23,7 +23,7 @@ export default function Navigation() {
                 <BottomTabNavigator.Screen name="List" component={ListScreen}
                                             options={{
                                                 title: 'List',
-                                                tabBarIcon: ({color}) => <TabBarIcon name="list" color={color}/>,
+                                                tabBarIcon: ({color}) => <TabBarIcon name="th-large" color={color}/>,
                                             }}/>
                 <BottomTabNavigator.Screen name="Home" component={StackNavigation}
                                             options={{

package.json

@@ -15,22 +15,22 @@
     "@react-navigation/native-stack": "^6.9.10",
     "@react-navigation/stack": "^6.3.14",
     "@reduxjs/toolkit": "^1.9.3",
-    "expo": "~47.0.12",
-    "expo-status-bar": "~1.4.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.5",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-web": "~0.18.9",
+    "expo": "^48.0.0",
+    "expo-status-bar": "~1.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-web": "~0.18.11",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@types/react": "~18.0.14",
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.0.27",
     "@types/react-native": "~0.70.6",
-    "typescript": "^4.6.3"
+    "typescript": "^4.9.4"
   },
   "private": true
 }

screens/ListFav.tsx

@@ -25,7 +25,5 @@ const styles = StyleSheet.create({
         backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
-        borderWidth: 5,
-        borderColor : "#cacaca",
     },
 });

screens/ListScreen.tsx

@@ -1,10 +1,12 @@
 
-import { StyleSheet, Text, View, Button } from 'react-native';
+import { StyleSheet, Text, View, Button, ImageComponent } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 import { FlatList } from 'react-native-gesture-handler';
 import { StubLib } from '../data/stub';
 import { Card } from '../models/Card';
+import { Image } from 'react-native';
+import { ImageURISource } from 'react-native';
 
 //@ts-ignore
 const Item = ({title}) => (
@@ -22,11 +24,19 @@ export default function Main() {
 
     return (
         <View style={styles.container}>
-            <Text>{}</Text>
-            <FlatList data={list}         
-            renderItem={({item}) => <Item title={item.name} />}
-            keyExtractor={item => item.id}/>
-
+            <FlatList 
+                numColumns = {2}  
+                data={list}       
+                renderItem={({item}) => (
+                    <View>
+                        <Image
+                            source={{ uri: item.img }}
+                        style={{flex: 1, minHeight: 250,minWidth: 180}}
+                    />
+                </View>
+                )}
+                keyExtractor={item => item.id}
+            />
         </View>
 
         
@@ -38,11 +48,10 @@ export default function Main() {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#ffffff',
+        backgroundColor: '#ac9585',
         alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 5,
-        borderColor : "#ff00ff",
+        justifyContent: 'space-evenly',
+        
     },
     border: {
         flex: 1,

service/AsyncStorage.tsx

@@ -0,0 +1,17 @@
+import { Card } from "../models/Card";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export class AsyncStorageCard{
+
+    static AddCardStorage(name : string, cards : Card[]){
+        const storeFavoriteNounours = async (cards : Card[]) => {
+            try {
+                const jsonCard = JSON.stringify(cards)
+                await AsyncStorage.setItem(name, jsonCard);
+            } catch (e) {
+                console.log("An error occurred", e);
+            }
+        }
+    }
+
+}