Chat UI done ✅

src/FLAD/navigation/MessagingNavigation.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import Conversation from '../screens/Conversation'
+import Chat from '../screens/Chat';
 
-export default function SpotNavigation() {
+export default function MessagingNavigation() {
   const Stack = createStackNavigator();
 
   return (
@@ -11,7 +12,13 @@ export default function SpotNavigation() {
         name="Conversation"
         component={Conversation}
       />
-
+      <Stack.Screen
+        name="Chat"
+        component={Chat}
+        options = {{
+          headerShown: true
+        }}
+      />
     </Stack.Navigator>
   )
 }

src/FLAD/package.json

@@ -32,11 +32,13 @@
     "expo-secure-store": "~12.0.0",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
+    "expo-web-browser": "~12.0.0",
     "lottie-react-native": "5.1.4",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-gesture-handler": "~2.8.0",
+    "react-native-gifted-chat": "^2.0.1",
     "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
@@ -47,8 +49,7 @@
     "react-native-web": "~0.18.9",
     "react-navigation-shared-element": "^3.1.3",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1",
-    "expo-web-browser": "~12.0.0"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/FLAD/screens/Chat.tsx

@@ -0,0 +1,22 @@
+import { useNavigation } from "@react-navigation/native";
+import React, { useEffect } from "react";
+import { GiftedChat } from "react-native-gifted-chat";
+
+export default function Chat() {
+
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        navigation.getParent()?.setOptions({
+          tabBarStyle: {
+            display: "none"
+          }
+        });
+        return () => navigation.getParent()?.setOptions({
+          tabBarStyle: undefined
+        });
+      }, [navigation]);
+    return (
+        <GiftedChat />
+    )
+}

src/FLAD/screens/Conversation.tsx

@@ -1,3 +1,4 @@
+import { useNavigation } from "@react-navigation/native";
 import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
 import { useSelector } from "react-redux";
 import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
@@ -10,6 +11,8 @@ export default function ConversationList() {
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
+    const navigation = useNavigation();
+
     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') },
@@ -54,7 +57,7 @@ export default function ConversationList() {
                 renderItem={({ item }) => (
                     <TouchableOpacity
                         // @ts-ignore
-                        onPress={() => navigation.navigate('Message')}>
+                        onPress={() => navigation.navigate('Chat')}>
                         <Friend image={item.source} name={item.name} lastMessage={item.lastMessage} />
                     </TouchableOpacity>
                 )}