ADD: component Message

bob_party/src/components/MessageComponent.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import { Skin } from "../core/skin"
+import { Conversation } from "../core/conversation"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/MessageComponent.style.js"
+import { SkinComponent } from "./Skin"
+import { MANAGER_USER } from "../../appManagers"
+import { User } from "../core/User/user"
+import { Message } from "../core/message"
+
+export const MessageComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+*/ 
+FC<{mess: Message}> = 
+({mess}) => 
+{ 
+    let messStyle;
+    const user1 = MANAGER_USER.getCurrentUser();
+    if (mess.getMessageSender() === user1){
+        return(
+            
+            <View style={styles.mainRightView}>
+                <View style={styles.rightView}>    
+                    <View>
+                        <SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={styles.rightTextView}>
+                        <Text style={styles.text}>{mess.getMessageContent()}</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+    else{
+        return(
+            <View style={styles.mainLeftView}>
+                <Text style={styles.senderUsername}>{mess.getMessageSender().getUsername()}</Text>
+                <View style={styles.leftView}>
+                    <View>
+                        <SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={styles.leftTextView}>
+                        <Text style={styles.text}>{mess.getMessageContent()}</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    
+}

bob_party/src/components/Skin.tsx

@@ -26,7 +26,7 @@ export const SkinComponent:
         * skin : Skin to be displayed
         * state : Indicates from wich screen the component has been called
     */
-    FC<{ nav: any, skin: Skin, state: String }> =
+    FC<{  skin: Skin, state: String, nav?: any,}> =
     ({ nav, skin, state }) => {
 
         const navigation = nav;

bob_party/src/components/style/MessageComponent.style.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    leftView: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+       
+    },
+    text: {
+        fontSize: 20,
+        lineHeight: 24,
+        letterSpacing: 0.25,
+        color: 'white',
+        
+    },
+    leftTextView: {
+        backgroundColor: '#888898',
+        padding: 15,
+        marginLeft: 5,
+        borderRadius: 15,
+        borderBottomLeftRadius: 0,
+    },
+    rightTextView: {
+        backgroundColor: '#0086FE',
+        padding: 15,
+        marginRight: 5,
+        borderRadius: 15,
+        borderBottomRightRadius: 0,
+    },
+    mainRightView: {
+        flexDirection: 'row-reverse',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+        margin: 10,
+    },
+    rightView: {
+        maxWidth: '75%',
+        flexDirection: 'row-reverse',
+        alignItems: 'flex-end',
+    },
+    senderUsername: {
+        marginLeft: 55,
+        marginBottom: 5,
+        fontSize: 20,
+        fontWeight: "800",
+        lineHeight: 24,
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    mainLeftView: {
+        margin: 10,
+        maxWidth: '75%',
+    }
+});