Set icon app, create splash screen and more...

android/app/src/main/AndroidManifest.xml

@@ -14,10 +14,15 @@
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
+      android:icon="@drawable/icon"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
+      <meta-data
+        android:name="com.google.firebase.messaging.default_notification_icon"
+        android:resource="@drawable/icon" />
+      <meta-data
+        android:name="com.google.firebase.messaging.default_notification_color"
+        android:resource="@color/notification_color" />
       <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
         <intent-filter>
           <action android:name="com.google.firebase.MESSAGING_EVENT" />

android/app/src/main/java/com/unichat/MainActivity.java

@@ -1,15 +1,36 @@
 package com.unichat;
 
 import com.facebook.react.ReactActivity;
+import android.os.Bundle;
+import android.os.CountDownTimer;
+import android.graphics.Color;
 
 public class MainActivity extends ReactActivity {
 
     /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
+     * Returns the name of the main component registered from JavaScript. This is
+     * used to schedule rendering of the component.
      */
     @Override
     protected String getMainComponentName() {
         return "Unichat";
     }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        // Set the Android background to white after 8 seconds
+        // to fix the splashscreen flash when the keyboard is shown
+        new CountDownTimer(8000, 1000) {
+
+            public void onTick(long millisUntilFinished) {
+            }
+
+            public void onFinish() {
+                getWindow().getDecorView().setBackgroundColor(Color.WHITE);
+            }
+
+        }.start();
+    }
 }

android/app/src/main/res/drawable/background_splash.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
+  <item android:drawable="@color/primary" />
+  <item 
+    android:width="200dp"
+    android:height="200dp"
+    android:drawable="@drawable/logo"
+    android:gravity="center"
+  />
+</layer-list>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<resources> 
+  <color name="primary">#FFF</color>
+  <color name="notification_color">#007AFF</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -3,6 +3,8 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:windowBackground">@drawable/background_splash</item>
+        <item name="android:statusBarColor">@color/primary</item>
     </style>
 
 </resources>

functions/index.js

@@ -31,11 +31,14 @@ return (exports.sendPushNotification = functions.firestore
         },
         notification: {
           title: contactName,
-          body: contentTranslated,
+          body: content,
           sound: "default",
-          android_channel_id: "main-channel",
-          collapseKey: "unichat",
-          group: "unichat"
+          priority: "high",
+          icon: "icon",
+          android_channel_id: "unichat",
+          large_icon: "icon",
+          show_in_foreground: "true",
+          content_available: "true"
         }
       }
 

src/Components/Chat/chatContainer.js

@@ -5,7 +5,7 @@ import getTime from "~/functions/getTime"
 import Message from "../mensagem"
 
 const Chat = props => {
-  const { messages } = props
+  const { messages, destUserUid } = props
   return (
     <View>
       <FlatList
@@ -15,6 +15,8 @@ const Chat = props => {
         renderItem={({ item }) => {
           return (
             <Message
+              chave={item.key}
+              destUserUid={destUserUid}
               content={
                 item.source === "1" ? item.content : item.contentTranslated
               }

src/Components/mensagem.js

@@ -2,6 +2,7 @@ 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 firebase from "react-native-firebase"
 
 const styles = StyleSheet.create({
   // Estilo para a mensagem do remetente
@@ -85,33 +86,88 @@ const styles = StyleSheet.create({
 })
 
 export default class Mensagem extends PureComponent {
-  constructor() {
-    super()
+  constructor(props) {
+    super(props)
     this.state = {
+      chave: "",
       content: "",
       date: "",
       source: "",
       original: ""
     }
+    const userUid = firebase.auth().currentUser.uid
+    const { destUserUid } = this.props
+    this.ref = firebase
+      .firestore()
+      .collection("users")
+      .doc(userUid)
+      .collection("conversas")
+      .doc(destUserUid)
+      .collection("messages")
   }
 
   componentDidMount() {
-    const { content, date, source, original } = this.props
+    const { chave, content, date, source, original } = this.props
 
-    this.setState({ content, date, source, original })
+    this.setState({ chave, content, date, source, original })
+  }
+
+  alterarIdioma = chave => {
+    const { content, original } = this.state
+    const translated = content
+    const noTranslated = original
+    this.ref
+      .doc(chave)
+      .get()
+      .then(doc => {
+        const { isChanged } = doc.data()
+        if (isChanged) {
+          this.ref.doc(chave).update({
+            content: translated,
+            contentTranslated: noTranslated,
+            isChanged: false
+          })
+        } else {
+          this.ref.doc(chave).update({
+            content: translated,
+            contentTranslated: noTranslated,
+            isChanged: true
+          })
+        }
+        this.setState({ content: noTranslated, original: translated })
+      })
   }
 
   verLinguaOriginal = () => {
-    const { original } = this.state
-    Alert.alert(
-      "Confirmar",
-      "Deseja ver a mensagem na linguagem original?",
-      [
-        { text: "Sim", onPress: () => this.setState({ content: original }) },
-        { text: "Não" }
-      ],
-      { cancelable: false }
-    )
+    const { chave } = this.state
+
+    this.ref
+      .doc(chave)
+      .get()
+      .then(doc => {
+        const { isChanged } = doc.data()
+        if (isChanged) {
+          Alert.alert(
+            "Confirmar",
+            "Deseja ver a tradução da mensagem?",
+            [
+              { text: "Sim", onPress: () => this.alterarIdioma(chave) },
+              { text: "Não" }
+            ],
+            { cancelable: false }
+          )
+        } else {
+          Alert.alert(
+            "Confirmar",
+            "Deseja ver a mensagem na linguagem original?",
+            [
+              { text: "Sim", onPress: () => this.alterarIdioma(chave) },
+              { text: "Não" }
+            ],
+            { cancelable: false }
+          )
+        }
+      })
   }
 
   render() {

src/Screens/Chat/chat.js

@@ -204,7 +204,8 @@ export default class Conversas extends Component {
                 content: newMessage.content,
                 date: newMessage.date,
                 contentTranslated: translated,
-                source: "2"
+                source: "2",
+                isChanged: false
               })
               .then(() => true)
               .catch(error => error)
@@ -267,7 +268,7 @@ export default class Conversas extends Component {
           status={status}
         />
         <View style={styles.chatContainer}>
-          <ChatContainer messages={messages} />
+          <ChatContainer messages={messages} destUserUid={destUser.key}/>
         </View>
         <View style={styles.input}>
           <ChatInput

src/Screens/Conversas/conversas.js

@@ -9,7 +9,8 @@ import {
   TouchableOpacity,
   BackHandler,
   Alert,
-  AppState
+  AppState,
+  StatusBar
 } from "react-native"
 import { ListItem, Icon } from "react-native-elements"
 import LinearGradient from "react-native-linear-gradient"
@@ -40,19 +41,36 @@ export default class Conversas extends Component {
   }
 
   async componentDidMount() {
-    this.listener = this.ref.onSnapshot(async () => {
-      const username = await AsyncStorage.getItem("@username")
-      const profileImageUrl = await AsyncStorage.getItem("@profileImageUrl")
-      this.setState({ myName: username, myPicture: profileImageUrl })
-    })
     const { navigation } = this.props
+    const { isSerchable } = this.state
+
+    const username = await AsyncStorage.getItem("@username")
+    const profileImageUrl = await AsyncStorage.getItem("@profileImageUrl")
+    this.setState({ myName: username, myPicture: profileImageUrl })
+
+    const channel = new firebase.notifications.Android.Channel(
+      "unichat",
+      "Unichat channel",
+      firebase.notifications.Android.Importance.Max
+    )
+      .setDescription("My app channel")
+      .setVibrationPattern([500])
+      .setLockScreenVisibility(firebase.notifications.Android.Visibility.Public)
+
+    firebase.notifications().android.createChannel(channel)
+
     const notificationOpen = await firebase
       .notifications()
       .getInitialNotification()
     if (notificationOpen) {
       const { notification } = notificationOpen
       const { conversaId } = notification.data
       notification.android.setGroup("unichat")
+      notification.android.setPriority(
+        firebase.notifications.Android.Priority.High
+      )
+      notification.android.setChannelId("unichat")
+      notification.android.setVibrate([500])
       this.ref
         .collection("conversas")
         .doc(conversaId)
@@ -63,35 +81,40 @@ export default class Conversas extends Component {
           navigation.navigate("ChatScreen", { item })
         })
     }
+
     this.ref.update({
       online: true
     })
+
     NetInfo.isConnected.addEventListener(
       "connectionChange",
       this.handleConnectivityChange
     )
+
     AppState.addEventListener("change", this.handleAppStateChange)
     BackHandler.addEventListener("hardwareBackPress", this.handleBackPress)
     this.getData()
     this.willBlur = navigation.addListener("willBlur", () => {
-      this.setState(prevState => ({
-        arrayholder: prevState.conversas,
-        isSerchable: false,
-        text: ""
-      }))
+      if (isSerchable)
+        this.setState(prevState => ({
+          arrayholder: prevState.conversas,
+          isSerchable: false,
+          text: ""
+        }))
     })
   }
 
   componentWillUnmount() {
+    const { isSerchable } = this.state
     BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress)
     this.unsubscribe()
-    this.listener()
     this.willBlur.remove()
-    this.setState(prevState => ({
-      arrayholder: prevState.conversas,
-      isSerchable: false,
-      text: ""
-    }))
+    if (isSerchable)
+      this.setState(prevState => ({
+        arrayholder: prevState.conversas,
+        isSerchable: false,
+        text: ""
+      }))
   }
 
   handleConnectivityChange = isConnected => {
@@ -301,6 +324,7 @@ export default class Conversas extends Component {
       )
     return (
       <View style={styles.container}>
+        <StatusBar backgroundColor="#FFF" barStyle="dark-content" />
         {toolbar}
         <FlatList
           data={arrayholder}