Realized view conversation page ✅

src/FLAD/components/Friend.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
+import { color } from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 import normalize from './Normalize';
 
-type UserProps = {
+type FriendProps = {
     image: string;
     name: string;
     lastMessage: string;
 }
 
-
+export default function Friend(friend: FriendProps) {
-export default function Friend() {
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
+    const source = typeof friend.image === 'string' ? { uri: friend.image } : friend.image;
+
     const styles = StyleSheet.create({
         container: {
             flexDirection: 'row',
@@ -26,21 +28,57 @@ export default function Friend() {
         },
         image: {
             marginLeft: 15,
-            marginRight: 7,
+            marginRight: 12,
-            width: 50,
+            width: 55,
-            height: 50
+            height: 55,
+            borderRadius: 180
         },
         name: {
-            fontWeight: 'bold',
+            fontWeight: "500",
             color: style.Text,
-            fontSize: normalize(22)
+            fontSize: normalize(16)
+        },
+        lastMessageContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            maxWidth: '90%'
+        },
+        lastMessage: {
+            fontSize: normalize(18),
+            color: '#989898',
+            flexShrink: 1
+        },
+        time: {
+            fontSize: normalize(18),
+            color: '#989898'
+        },
+        profilContainer: {
+            marginTop: 5,
+            flex: 1,
+            marginLeft: 5,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+        },
+        button: {
+            width: normalize(13),
+            height: normalize(13),
+            marginRight: 42
         }
     })
 
     return (
         <View style={styles.container}>
-            <Image style={styles.image} source={require("../assets/RedFlady.png")} />
+            <Image style={styles.image} source={source} />
-            <Text style={styles.name} >Emre KARTAL</Text>
+            <View style={styles.profilContainer}>
+                <Text style={styles.name} numberOfLines={1}>{friend.name}</Text>
+                <View style={styles.lastMessageContainer}>
+                    <Text style={styles.lastMessage} numberOfLines={1}>{friend.lastMessage}</Text>
+                    <Text style={styles.time}> · 1sem</Text>
+                </View>
+            </View>
+            <Image style={styles.button} source={require('../assets/icons/icons/buttonProfil.png')} />
         </View>
     )
 }

src/FLAD/navigation/AuthNavigation.tsx

@@ -38,8 +38,9 @@ export default function AuthNavigation() {
       const currentValue = await AsyncStorage.getItem('dark');
       if (currentValue !== null) {
         const newValue = JSON.stringify(JSON.parse(currentValue));
+        //@ts-ignore
         dispatch(ChangeMode(JSON.parse(newValue)))
-      }
+      } 
     } catch (error) {
       console.log(`Une erreur s'est produite lors de la mise à jour de la valeur booléenne pour la clé 'dark': `, error);
     }

src/FLAD/navigation/MessagingNavigation.tsx

@@ -6,9 +6,9 @@ export default function SpotNavigation() {
   const Stack = createStackNavigator();
 
   return (
-    <Stack.Navigator initialRouteName="ConversationList">
+    <Stack.Navigator initialRouteName="Conversation" screenOptions={{ gestureEnabled: true, headerShown: false, cardOverlayEnabled: true, cardStyle: { backgroundColor: "transparent" } }}>
       <Stack.Screen
-        name="ConversationList"
+        name="Conversation"
         component={Conversation}
       />
 

src/FLAD/redux/thunk/authThunk.tsx

@@ -124,6 +124,7 @@ export const ChangeMode = (value: boolean) => {
 export const ChangeImageUserCurrent = (value: ImagePicker) => {
   //@ts-ignore
   return async dispatch => {
+    //@ts-ignore
     dispatch(userChangeImage(value));
   }
 }

src/FLAD/screens/Conversation.tsx

@@ -1,26 +1,64 @@
-import { SafeAreaView, StyleSheet } from "react-native";
+import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
 import { useSelector } from "react-redux";
 import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import Friend from "../components/Friend";
+import normalize from '../components/Normalize';
 
 export default function ConversationList() {
 
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
+    const friends = [
+        { id: 1, name: "Lucas", lastMessage: "J'en ai marre de provot", source: require('../assets/images/jul.png') },
+        { id: 2, name: "Louison", lastMessage: "Tu vien piscine ?", source: require('../assets/images/jul.png') },
+        { id: 3, name: "Dave", lastMessage: "Ok c noté !", source: require('../assets/images/pnl.png') },
+        { id: 4, name: "Valentin", lastMessage: "Haha react native c incroyable !!!", source: require('../assets/images/jul.png') },
+    ];
+
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
     const styles = StyleSheet.create({
         mainSafeArea: {
             flex: 1,
             backgroundColor: style.body,
+        },
+        titleContainer: {
+            marginTop: 30,
+            marginLeft: 20,
+        },
+        title: {
+            fontSize: normalize(28),
+            fontWeight: 'bold',
+            color: style.Text,
+        },
+        description: {
+            marginTop: 10,
+            fontSize: normalize(20),
+            color: '#787878',
+            marginBottom: 20
         }
-    )
+    })
 
     return (
         <SafeAreaView style={styles.mainSafeArea}>
-
+            <View style={styles.titleContainer}>
-            
+                <Text style={styles.title}>Messages</Text>
+                <Text style={styles.description}>Retrouvez ici tous vos amis!</Text>
+            </View>
+            <FlatList
+                style={{ marginTop: 10 }}
+                data={friends}
+                keyExtractor={(item) => item.id.toString()}
+                renderItem={({ item }) => (
+                    <TouchableOpacity
+                        // @ts-ignore
+                        onPress={() => navigation.navigate('Message')}>
+                        <Friend image={item.source} name={item.name} lastMessage={item.lastMessage} />
+                    </TouchableOpacity>
+                )}
+            />
         </SafeAreaView>
     )
 }

src/FLAD/screens/Favorite.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
+import { Image, StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'