init chat

src/App.vue

@@ -10,14 +10,18 @@
   import HomeScreen from "./screens/homeScreen.vue"
   import PregnantDayScreen from "./screens/pregnantDayScreen.vue"
   import DiaryScreen from "./screens/diaryScreen.vue"
+  import ChatListScreen from "./screens/chatListScreen.vue"
+  import PrivateChatScreen from "./screens/privateChatScreen.vue"
 
   const AppNavigation = StackNavigator(
     {
       Home: HomeScreen,
+      ChatList: ChatListScreen,
+      PrivateChat: PrivateChatScreen,
       PregnantDay: PregnantDayScreen,
       Diary: DiaryScreen
     }, {
-      initialRouteName: 'Home',
+      initialRouteName: 'ChatList',
       headerMode: 'none'
     }
   )

src/boot.vue

@@ -32,6 +32,7 @@
             Sarabun: require('../assets/fonts/Sarabun-Regular.ttf'),
             Dancing_script_bold: require('../assets/fonts/DancingScript-Bold.ttf'),
             Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
+            Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf")
           })
           this.isAppReady = true
         } catch (error) {

src/screens/chatListScreen.vue

@@ -0,0 +1,79 @@
+<template>
+  <nb-container>
+    <nb-header />
+    <nb-content>
+      <nb-list-item avatar :on-press="handleOnPress">
+        <nb-left>
+          <nb-thumbnail small :source="avatar" />
+        </nb-left>
+        <nb-body>
+          <nb-text>Kumar Pratik</nb-Text>
+          <nb-text note :numberOfLines="1">Doing what you like will always keep you happy . .</nb-Text>
+        </nb-body>
+        <nb-right>
+          <nb-text note>3:43 pm</nb-text>
+        </nb-right>
+      </nb-list-item>
+    </nb-content>
+  </nb-container>
+</template>
+
+<script>
+  import firebase from '../firebase.js'
+
+  export default {
+    props: {
+      navigation: { type: Object }
+    },
+    data() {
+      return {
+        avatar: require('../../assets/images/squirtle.png')
+      }
+    },
+    methods: {
+      handleOnPress() {
+        this.navigation.navigate('PrivateChat')
+      }
+    }
+  }
+</script>
+
+<style>
+  .logo {
+    align-items: center;
+    margin-top: 100;
+  }
+  .title {
+    align-items: center;
+    height: 80;
+  }
+  .title-text {
+    padding-top: 55;
+    fontFamily: Dancing_script_bold;
+    fontSize: 75;
+  }
+  .subtitle {
+    margin-top: -10;
+    fontSize: 20;
+  }
+  .intro {
+    text-align: center;
+  }
+  .input {
+    text-align: center;
+  }
+  .tip {
+    text-align: center;
+    fontSize: 13;
+    margin: 10;
+    color: #999;
+  }
+  .create-btn {
+    margin-top: 40;
+    align-self: center;
+    padding: 10;
+  }
+  .btn-text {
+    font-weight: bold;
+  }
+</style>

src/screens/homeScreen.vue

@@ -49,7 +49,7 @@
         firebase.auth().onAuthStateChanged((user) => {
           if (user != null) {
             firebase.database().ref('/users/' + user.uid).once('value').then((snapshot) => {
-              this.navigation.navigate(snapshot.exists() ? 'Diary' : 'PregnantDay')
+              this.navigation.navigate(snapshot.exists() ? 'ChatList' : 'PregnantDay')
             })
           }
         })

src/screens/privateChatScreen.vue

@@ -0,0 +1,75 @@
+<template lang="html">
+  <nb-container>
+    <nb-header />
+      <flat-list
+        :data="listViewData"
+        :render-item="(item) => renderList(item)"
+        :key-extractor="(item) => item.createdAt + '' "
+        :refreshing="refreshing"
+        inverted
+    />
+    <nb-header searchBar rounded>
+        <nb-input v-model="messages" placeholder="Your messages" />
+        <nb-button :on-press="handleSendMessage" @keyup.native.enter="handleSendMessage" transparent>
+          <nb-icon active name="send" />
+        </nb-button>
+    </nb-header>
+  </nb-container>
+</template>
+<script>
+// Required for side-effects
+  require("firebase/firestore");
+  import firebase from '../firebase.js'
+  import React from "react";
+  import { ListView } from "react-native";
+  import { Button, Icon, Text, ListItem } from "native-base";
+
+
+  export default {
+    props: {
+      navigation: { type: Object }
+    },
+    data() {
+      return {
+        refreshing: false,
+        listViewData: [],
+        messages: '',
+        sendMessage: '',
+        avatar: require('../../assets/images/squirtle.png')
+      }
+    },
+    methods: {
+      renderList: function(item) {
+        return (<Text>{item.item.message}</Text>)
+      },
+      handleSendMessage: function (){
+        let _self = this
+        var db = firebase.firestore();
+        if (_self.messages != ''){
+          let message = {
+            createdAt: new Date(),
+            message: _self.messages
+          }
+          db.collection("chats").add({
+              message
+          })
+          .then(function(docRef) {
+              console.log("Document written with ID: ", docRef.id);
+          })
+          .catch(function(error) {
+              console.error("Error adding document: ", error);
+          })
+          _self.listViewData.push(message)
+          _self.messages = ''
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .logo {
+    align-items: center;
+    margin-top: 100;
+  }
+</style>