Max#componente para grupo

src/Components/Chat/chatContainer.js

@@ -15,6 +15,7 @@ const Chat = props => {
         renderItem={({ item }) => {
           return (
             <Message
+              nomeRemetente={null}
               chave={item.key}
               destUserUid={destUserUid}
               content={

src/Components/mensagem.js

@@ -2,8 +2,10 @@ import React, { PureComponent } from "react"
 import { Svg, Path } from "react-native-svg"
 import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native"
 import { moderateScale } from "react-native-size-matters"
+import getColor from "~/functions/getColor"
 import firebase from "react-native-firebase"
 
+const cor = getColor()
 const styles = StyleSheet.create({
   // Estilo para a mensagem do remetente
   remet: {
@@ -32,6 +34,7 @@ const styles = StyleSheet.create({
     right: 5
   },
   textRemet: {
+    fontFamily: "Open Sans",
     fontSize: 14,
     color: "white"
   },
@@ -64,13 +67,20 @@ const styles = StyleSheet.create({
     marginBottom: 5,
     padding: 10
   },
+  nomeRemetente: {
+    fontFamily: "Open Sans",
+    fontSize: 12,
+    fontWeight: "bold",
+    color: cor
+  },
   arrowDest: {
     elevation: 5,
     position: "absolute",
     bottom: 0,
     left: 5
   },
   textDest: {
+    fontFamily: "Open Sans",
     fontSize: 14,
     color: "black"
   },
@@ -93,7 +103,8 @@ export default class Mensagem extends PureComponent {
       content: "",
       date: "",
       source: "",
-      original: ""
+      original: "",
+      nomeRemetente: null
     }
     const userUid = firebase.auth().currentUser.uid
     const { destUserUid } = this.props
@@ -107,9 +118,9 @@ export default class Mensagem extends PureComponent {
   }
 
   componentDidMount() {
-    const { chave, content, date, source, original } = this.props
+    const { chave, content, date, source, original, nomeRemetente } = this.props
 
-    this.setState({ chave, content, date, source, original })
+    this.setState({ chave, content, date, source, original, nomeRemetente })
   }
 
   alterarIdioma = chave => {
@@ -171,7 +182,7 @@ export default class Mensagem extends PureComponent {
   }
 
   render() {
-    const { content, date, source } = this.state
+    const { content, date, source, nomeRemetente } = this.state
     let message
     // Remetente
     if (source === "1") {
@@ -225,6 +236,11 @@ export default class Mensagem extends PureComponent {
               </Svg>
             </View>
             <View style={styles.boxDest}>
+              {nomeRemetente && (
+                <View>
+                  <Text style={styles.nomeRemetente}>{nomeRemetente}</Text>
+                </View>
+              )}
               <Text style={styles.textDest}>{content}</Text>
             </View>
           </TouchableOpacity>

src/functions/getColor.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-plusplus */
+const getColor = () => {
+  const hexadecimais = "0123456789ABCDEF"
+  let cor = "#"
+  while (1) {
+    for (let i = 0; i < 6; i++) {
+      cor += hexadecimais[Math.floor(Math.random() * 16)]
+    }
+    if (cor === "#FFFFFF") {
+      cor = "#"
+    } else {
+      return cor
+    }
+  }
+}
+
+export default getColor