adding in twitter frontend post in chat

app/screens/main/apis/twitter.js

@@ -0,0 +1,67 @@
+/*
+ * Twitter view component for the chat
+ */
+import React, { Component } from 'react';
+import {
+  Dimensions,
+  View,
+  Image,
+  Text
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+
+type Props = {};
+export default class TwitterLocal extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Icon
+          name='twitter'
+          style={styles.icon}
+        />
+        <Text style={styles.bodyTxt}>'this is the content of the tweet body longer than ever....Donal TRump you genius marketer awesome man!!!!!!!!!!!!!!!!asdfasdfsdfsd'</Text>
+        <Text style={styles.screenNameTxt}>@Arjun Patel</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    backgroundColor: '#0e8f9e',
+    margin: 30,
+    padding: 10,
+    borderRadius: 5,
+    shadowColor: 'grey',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1.0,
+    elevation: 4
+  },
+  icon: {
+    borderRadius: 60,
+    fontSize: 20,
+    color: 'white'
+  },
+  bodyTxt: {
+    fontSize: 16,
+    color: 'white',
+    margin: 5
+  },
+  screenNameTxt: {
+    fontSize: 12,
+    color: '#e5e7ea',
+    margin: 5,
+    alignSelf: 'flex-end'
+  }
+}

app/screens/main/chat.js

@@ -21,6 +21,8 @@ require('react-native');
 
 // Socket.io imports
 import './UserAgent';
+import TwitterLocal from './apis/twitter.js';
+
 window.navigator.userAgent = "react-native";
 const io = require('socket.io-client/dist/socket.io');
 
@@ -48,28 +50,28 @@ export default class Chat extends Component<Props> {
     console.log(props);
   }
 
-  // componentDidMount() {
+  componentDidMount() {
-  //   this.socket = io('http://10.0.2.2:3000', {jsonp: false});
+    this.socket = io('http://10.0.2.2:3000', {jsonp: false});
-  //   this.socket.on('connect', () => {
+    this.socket.on('connect', () => {
-  //     this.socket.emit('initial', {position: this.props.position, avatar: this.props.avatar});
+      this.socket.emit('initial', {position: this.props.position, avatar: this.props.avatar});
-  //   });
+    });
-  //
+
-  //   this.socket.on("userId", (obj) => {
+    this.socket.on("userId", (obj) => {
-  //     console.log("User Id assigned: " + obj.userId);
+      console.log("User Id assigned: " + obj.userId);
-  //     this.setState({userId: obj.userId});
+      this.setState({userId: obj.userId});
-  //   });
+    });
-  //
+
-  //   this.socket.on('initMessages', (allMsg) => {
+    this.socket.on('initMessages', (allMsg) => {
-  //     console.log('Initial messages received: ' + allMsg);
+      console.log('Initial messages received: ' + allMsg);
-  //     allMsg.map((msg) => {
+      allMsg.map((msg) => {
-  //       this.addMessage(msg);
+        this.addMessage(msg);
-  //     });
+      });
-  //   });
+    });
-  //
+
-  //   this.socket.on('newMessage', (msg) => {
+    this.socket.on('newMessage', (msg) => {
-  //     this.addMessage(msg);
+      this.addMessage(msg);
-  //   });
+    });
-  // }
+  }
 
   addMessage = (msg) => {
     console.log('New message received: ');
@@ -165,6 +167,7 @@ export default class Chat extends Component<Props> {
               }}
               scrollEnabled={true}
               contentContainerStyle={styles.chatFieldScroll}>
+              <TwitterLocal />
               {this.state.messagesDOM}
             </ScrollView>
           </View>
@@ -219,8 +222,8 @@ const styles = {
       alignItems: 'center'
     },
       loadingGif: {
-        height: 70,
+        height: 50,
-        width: 70
+        width: 50
       },
     msgCont: {
       flexDirection: 'row',