initial commit

App.js

@@ -1,11 +1,11 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
-import ArtistView from 'componente/ArtistView';
+import ArtistCard from './componente/ArtistCard';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <ArtistView></ArtistView>
+      <ArtistCard name={"Eminem"} imageUri={"https://images.genius.com/76c536a17ca35f7edd1f78e129609fe0.573x573x1.jpg"}></ArtistCard>
       <StatusBar style="auto" />
     </View>
   );

componente/ArtistCard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Image, Text, StyleSheet } from 'react-native';
+
+const ArtistCard = ({ imageUri, name }) => {
+    return (
+        <View style={styles.container}>
+            <Image source={{ uri: imageUri }} style={styles.image}/>
+            <Text style={styles.name}>{name}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        margin: 10,
+    },
+    image: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        marginRight: 10,
+    },
+    name: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+});
+
+export default ArtistCard;

componente/ArtistView.js

@@ -1,9 +0,0 @@
-import {Text} from "react-native";
-
-export default function ArtistView() {
-    return (
-        <View>
-            <Text>bonjour</Text>
-        </View>
-    )
-}

componente/ArtistePage.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Image, Text, StyleSheet } from 'react-native';
+
+const ArtistPage = ({ name, imageUri }) => {
+    return (
+        <View style={styles.container}>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <Text style={styles.name}>{name}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    image: {
+        width: 200,
+        height: 200,
+        borderRadius: 100,
+        marginBottom: 10,
+    },
+    name: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+});
+
+export default ArtistPage;

package.json

@@ -10,12 +10,16 @@
   },
   "dependencies": {
     "@expo/ngrok": "^4.1.0",
-    "expo": "^47.0.13",
+    "@extra-fs/promises": "^3.1.4",
-    "expo-cli": "^6.3.1",
+    "@reduxjs/toolkit": "^1.9.3",
+    "expo": "^48.0.4",
+    "expo-cli": "^6.3.2",
     "expo-status-bar": "~1.4.2",
     "fs-promise": "^2.0.3",
     "react": "18.1.0",
-    "react-native": "0.70.5"
+    "react-native": "0.70.5",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

reduxStore/action.js

@@ -0,0 +1,9 @@
+import {FETCH_ARTISTE} from '../constants';
+import Artist from '../defineObject/Artist';
+
+export const setArtistList = (ArtistList: Artist[]) => {
+    return {
+        type: FETCH_ARTISTE,
+        payload: ArtistList,
+    };
+}

reduxStore/reducer.js

@@ -0,0 +1,12 @@
+const initialState = {
+    artists: [],
+}
+
+export default appReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_ARTISTE:
+            return {...state, artists: action.payload};
+        default:
+            return state;
+    }
+}

reduxStore/store.js

@@ -0,0 +1,15 @@
+import {configureStore} from '@reduxjs/toolkit'
+import appReducer from './appReducer';
+
+// Reference here all your application reducers
+const reducer = {
+    appReducer: appReducer,
+}
+
+// @ts-ignore
+const store = configureStore({
+        reducer,
+    },
+);
+
+export default store;