ui changes with gif and also other minor changes

android/app/build.gradle

@@ -152,7 +152,9 @@ dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
-    compile 'com.facebook.fresco:animated-gif:1.0.1' // for gif support
+    compile 'com.facebook.fresco:fresco:1.3.0' // For animated GIF support
+    compile 'com.facebook.fresco:animated-gif:1.3.0'
+    compile 'com.facebook.fresco:animated-base-support:1.3.0'
     compile project(':react-native-vector-icons')
 }
 

app/screens/home.js

@@ -9,7 +9,8 @@ import {
   Text,
   TouchableOpacity,
   Permissions,
-  AsyncStorage
+  AsyncStorage,
+  Image
 } from 'react-native';
 import {
   Actions
@@ -18,7 +19,9 @@ import { Fonts } from '../utils/Fonts.js';
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
-const backgroundLink = '../assets/images/homeBg.jpg';
+
+const backgroundLink = '../assets/images/mainBg.jpg';
+const logoLink = '../assets/images/logo.png';
 
 type Props = {};
 export default class Home extends Component<Props> {
@@ -31,8 +34,7 @@ export default class Home extends Component<Props> {
       <View style={homeStyles.container}>
         <ImageBackground style={homeStyles.bg} source={require(backgroundLink)} >
         <View>
-          <Text style={homeStyles.logo}>Nexto</Text>
-          <Text style={homeStyles.motto}>spontaneous connection</Text>
+          <Image style={homeStyles.logo} source={require(logoLink)} />
         </View>
 
         <TouchableOpacity style={homeStyles.connect} onPress={this.connect.bind(this)}>
@@ -58,26 +60,22 @@ const homeStyles = {
     height: windowHeight
   },
   logo: {
-    color: 'grey',
-    fontSize: 50,
-    textAlign: 'center',
-    zIndex: 100,
-    fontFamily: Fonts.Sunflower
-  },
-  motto: {
-    color: '#0e8f9e',
-    fontSize: 18,
-    fontFamily: Fonts.Sunflower
+    zIndex: 2,
+    height: 350,
+    width: 350,
+    padding: 0
   },
   connect: {
-    backgroundColor: '#0e8f9e',
     padding: 15,
     width: windowWidth - 100,
     justifyContent: 'flex-end',
+    borderColor: 'black',
+    borderWidth: 2,
+    borderRadius: 5
   },
   connectTxt: {
     textAlign: 'center',
-    color: 'white',
+    color: 'black',
     fontSize: 25
   }
 }

app/screens/loading.js

@@ -15,7 +15,8 @@ import {
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
-const loadingGIF = 'http://www.playrosy.com/ourgames/vampiregirlmakeover/images/_preloader.gif';
+
+const loadingGIF = '../assets/images/loading.gif';
 
 type Props = {};
 export default class Loading extends Component<Props> {
@@ -55,8 +56,10 @@ export default class Loading extends Component<Props> {
   render() {
     return (
       <View style={loadingStyles.container}>
-        <Image style={loadingStyles.gif} source={{ uri: null }} />
+        <Image style={loadingStyles.gif} source={require(loadingGIF)} />
+
         <Text style={loadingStyles.waitTxt}>Please wait to be connected...</Text>
+
         <View style={loadingStyles.copyright}>
           <Text style={loadingStyles.copyTxt}>&copy; Nexto</Text>
         </View>
@@ -75,7 +78,8 @@ const loadingStyles = {
   },
   gif: {
     height: 50,
-    width: 50
+    width: 50,
+    zIndex: 10
   },
   waitTxt: {
     color: 'white',

app/screens/main/chat.js

@@ -27,6 +27,8 @@ const io = require('socket.io-client/dist/socket.io');
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
+const loadingGIF = '../../assets/images/loadingChat.gif';
+
 type Props = {};
 export default class Chat extends Component<Props> {
   constructor(props) {
@@ -46,28 +48,28 @@ export default class Chat extends Component<Props> {
     console.log(props);
   }
 
-  componentDidMount() {
-    this.socket = io('http://10.0.2.2:3000', {jsonp: false});
-    this.socket.on('connect', () => {
-      this.socket.emit('initial', {position: this.props.position, avatar: this.props.avatar});
-    });
-
-    this.socket.on("userId", (obj) => {
-      console.log("User Id assigned: " + obj.userId);
-      this.setState({userId: obj.userId});
-    });
-
-    this.socket.on('initMessages', (allMsg) => {
-      console.log('Initial messages received: ' + allMsg);
-      allMsg.map((msg) => {
-        this.addMessage(msg);
-      });
-    });
-
-    this.socket.on('newMessage', (msg) => {
-      this.addMessage(msg);
-    });
-  }
+  // componentDidMount() {
+  //   this.socket = io('http://10.0.2.2:3000', {jsonp: false});
+  //   this.socket.on('connect', () => {
+  //     this.socket.emit('initial', {position: this.props.position, avatar: this.props.avatar});
+  //   });
+  //
+  //   this.socket.on("userId", (obj) => {
+  //     console.log("User Id assigned: " + obj.userId);
+  //     this.setState({userId: obj.userId});
+  //   });
+  //
+  //   this.socket.on('initMessages', (allMsg) => {
+  //     console.log('Initial messages received: ' + allMsg);
+  //     allMsg.map((msg) => {
+  //       this.addMessage(msg);
+  //     });
+  //   });
+  //
+  //   this.socket.on('newMessage', (msg) => {
+  //     this.addMessage(msg);
+  //   });
+  // }
 
   addMessage = (msg) => {
     console.log('New message received: ');
@@ -150,9 +152,8 @@ export default class Chat extends Component<Props> {
 
         {this.state.messagesDOM.length == 0 ?
           (<View style={styles.chatFieldEmpty}>
-            <View style={styles.emptyMsg}>
-              <Text>No one's talkin around you! Start it up!</Text>
-            </View>
+            <Image style={styles.loadingGif} source={require(loadingGIF)} />
+            <Text>Loading the conversation around you!</Text>
           </View>)
           :
           (
@@ -217,6 +218,10 @@ const styles = {
       justifyContent: 'center',
       alignItems: 'center'
     },
+      loadingGif: {
+        height: 70,
+        width: 70
+      },
     msgCont: {
       flexDirection: 'row',
       alignSelf: 'stretch',
@@ -299,7 +304,7 @@ const styles = {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    borderLeftColor: '#0e8f9e',
+    borderLeftColor: '#c7c9cc',
     borderLeftWidth: 1
   },
     sendIcon: {

app/screens/main/navbar.js

@@ -40,7 +40,11 @@ export default class Navbar extends Component<Props> {
 
         <View style={styles.headerTxt}>
           <Text style={styles.head}>Chat</Text>
-          <Text style={styles.status}>online</Text>
+
+          <View style={styles.statusCont}>
+            <Icon style={styles.statusIcon} name='check-circle' />
+            <Text style={styles.statusTxt}>online</Text>
+          </View>
         </View>
 
         <View style={styles.iconCont}>
@@ -77,11 +81,18 @@ const styles = {
     color: 'white',
     fontFamily: Fonts.Sunflower
   },
-  status: {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: Fonts.Sunflower
+  statusCont: {
+    flexDirection: 'row'
   },
+    statusIcon: {
+      color: 'green',
+      marginRight: 5
+    },
+    statusTxt: {
+      fontSize: 13,
+      color: 'white',
+      fontFamily: Fonts.Sunflower
+    },
   avatar: {
     height: 30,
     width: 30,