Added many things:

- properly importing fonts with assets folders
- properly getting material icons with react-native-vector-icons
- figuring out how messages with display
- fixing keyboard bringing up other Views
- function for getting user input into TextInput

app/screens/home.js

@@ -14,10 +14,11 @@ import {
 import {
   Actions
 } from 'react-native-router-flux';
+import { Fonts } from '../utils/Fonts.js';
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
-const backgroundLink = 'https://cdn.shopify.com/s/files/1/2567/6484/products/Polygon_Esprit_geometric_white_and_gold_5.jpg?v=1517325402';
+const backgroundLink = '../assets/images/homeBg.jpg';
 
 type Props = {};
 export default class Home extends Component<Props> {
@@ -28,7 +29,7 @@ export default class Home extends Component<Props> {
   render() {
     return (
       <View style={homeStyles.container}>
-        <ImageBackground style={homeStyles.bg} source={{uri : backgroundLink}} >
+        <ImageBackground style={homeStyles.bg} source={require(backgroundLink)} >
         <View>
           <Text style={homeStyles.logo}>Nexto</Text>
           <Text style={homeStyles.motto}>spontaneous connection</Text>
@@ -60,11 +61,13 @@ const homeStyles = {
     color: 'grey',
     fontSize: 50,
     textAlign: 'center',
-    zIndex: 100
+    zIndex: 100,
+    fontFamily: Fonts.Sunflower
   },
   motto: {
     color: '#0e8f9e',
-    fontSize: 18
+    fontSize: 18,
+    fontFamily: Fonts.Sunflower
   },
   connect: {
     backgroundColor: '#0e8f9e',

app/screens/main.js

@@ -11,6 +11,7 @@ import {
 import {
   Actions
 } from 'react-native-router-flux';
+import { Fonts } from '../utils/Fonts.js';
 
 // imported components for different sections in main component
 import Navbar from './main/navbar.js';
@@ -45,16 +46,16 @@ const styles = {
   container: {
     flex: 18,
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    position: 'relative'
   },
   navbar: {
     flex: 2
   },
   chat: {
-    flex: 15,
-    backgroundColor: 'white'
+    flex: 15
   },
   adspace: {
-    flex: 1
+    flex: 2
   }
 }

app/screens/main/chat.js

@@ -12,16 +12,58 @@ import {
 import {
   Actions
 } from 'react-native-router-flux';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { Fonts } from '../../utils/Fonts.js';
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
 
 type Props = {};
 export default class Chat extends Component<Props> {
+  constructor(props) {
+    super(props);
+    var exMessages = [
+      {
+        id: 1,
+        text: "hey anyone wanna study 61A"
+      },
+      {
+        id: 2,
+        text: "Yea im down"
+      }
+    ];
+    this.state = {
+      messageToSend : '',
+      messagesDOM: exMessages.map(
+        (msg) => <View key={msg.id}><Text>{msg.text}</Text></View>
+        )
+    };
+  }
+
+  messageInput = (text) => {
+    console.log('changing state of messageToSend');
+    this.setState({
+      messageToSend : text
+    });
+    console.log(this.state.messageToSend);
+  }
+
   render() {
+    console.log(this.state.messagesDOM);
     return (
       <View style={styles.container}>
-        <View style={styles.chatField}>
+        <View style={this.state.messagesDOM.length == 0 ?
+          styles.chatField : styles.chatFieldEmpty}>
+
+          {this.state.messagesDOM.length == 0 ?
+            (<View style={styles.emptyMsg}>
+              <Text>No one's talkin around you! Start it up!</Text>
+            </View>)
+            :
+            (<View>
+              {this.state.messagesDOM}
+            </View>)
+          }
 
         </View>
         <View style={styles.inputMsgField}>
@@ -30,13 +72,15 @@ export default class Chat extends Component<Props> {
           </View>
           <View style={styles.inputCont}>
             <TextInput
-              placeholder="Type message..."
+              style={styles.inputField}
+              placeholder="Type a message..."
+              onChangeText={this.messageInput}
             />
           </View>
           <View style={styles.iconCont}>
-            <Image
+            <Icon
+              name='send'
               style={styles.sendIcon}
-              source={require('../../assets/images/sendIcon.png')}
             />
           </View>
         </View>
@@ -53,8 +97,17 @@ const styles = {
     backgroundColor: '#e8ebef'
   },
   chatField: {
-    flex: 8
+    flex: 8,
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
   },
+    chatFieldEmpty: {
+      flex: 8,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
   inputMsgField: {
     flex: 1,
     flexDirection: 'row',
@@ -72,8 +125,11 @@ const styles = {
     flex: 6,
     alignSelf: 'flex-end'
   },
+    inputField : {
+      fontSize: 18,
+      fontFamily: Fonts.SunflowerLight
+    },
   sendIcon: {
-    height: 30,
-    width: 30
+    fontSize: 25
   }
 }

app/screens/main/navbar.js

@@ -11,6 +11,8 @@ import {
 import {
   Actions
 } from 'react-native-router-flux';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { Fonts } from '../../utils/Fonts.js';
 
 const windowWidth = Dimensions.get('window').width;
 const windowHeight = Dimensions.get('window').height;
@@ -21,19 +23,19 @@ export default class Navbar extends Component<Props> {
     return (
       <View style={styles.container}>
         <View style={styles.iconCont}>
-          <Image
-          style={styles.menuIcon}
-          source={require('../../assets/images/menuIcon.png')}
+          <Icon
+            name='menu'
+            style={styles.menuIcon}
           />
         </View>
         <View style={styles.headerTxt}>
-          <Text style={styles.head}>Main Chat</Text>
+          <Text style={styles.head}>Chat</Text>
           <Text style={styles.status}>online</Text>
         </View>
         <View style={styles.iconCont}>
-          <Image
-          style={styles.inboxIcon}
-          source={require('../../assets/images/inboxIcon.jpg')}
+          <Icon
+            name='inbox'
+            style={styles.inboxIcon}
           />
         </View>
       </View>
@@ -54,8 +56,8 @@ const styles = {
     justifyContent: 'center'
   },
   menuIcon: {
-    height: 50,
-    width: 50
+    fontSize: 30,
+    color: 'white'
   },
   headerTxt: {
     flex: 7,
@@ -64,14 +66,16 @@ const styles = {
   },
   head: {
     fontSize: 20,
-    color: 'white'
+    color: 'white',
+    fontFamily: Fonts.Sunflower
   },
   status: {
     fontSize: 13,
-    color: 'white'
+    color: 'white',
+    fontFamily: Fonts.Sunflower
   },
   inboxIcon: {
-    height: 40,
-    width: 40
+    fontSize: 25,
+    color: 'white'
   }
 }

app/utils/Fonts.js

@@ -0,0 +1,4 @@
+export const Fonts = {
+  Sunflower : 'Sunflower-Medium',
+  SunflowerLight : 'Sunflower-Light'
+}