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

android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 import com.android.build.OutputFile
 
@@ -141,6 +142,7 @@ dependencies {
     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 project(':react-native-vector-icons')
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/AndroidManifest.xml

@@ -4,7 +4,7 @@
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
-    
+
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"
@@ -15,7 +15,7 @@
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />

android/app/src/main/java/com/nexto/MainApplication.java

@@ -1,8 +1,12 @@
 package com.nexto;
 
+import com.oblador.vectoricons.VectorIconsPackage;
+
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
+import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +26,8 @@ public class MainApplication extends Application implements ReactApplication {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new VectorIconsPackage()
       );
     }
 

android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'Nexto'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 
 include ':app'

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,
+    flex: 15
-    backgroundColor: 'white'
   },
   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,
+    fontSize: 25
-    width: 30
   }
 }

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
+          <Icon
-          style={styles.menuIcon}
+            name='menu'
-          source={require('../../assets/images/menuIcon.png')}
+            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
+          <Icon
-          style={styles.inboxIcon}
+            name='inbox'
-          source={require('../../assets/images/inboxIcon.jpg')}
+            style={styles.inboxIcon}
           />
         </View>
       </View>
@@ -54,8 +56,8 @@ const styles = {
     justifyContent: 'center'
   },
   menuIcon: {
-    height: 50,
+    fontSize: 30,
-    width: 50
+    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,
+    fontSize: 25,
-    width: 40
+    color: 'white'
   }
 }

app/utils/Fonts.js

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

ios/Nexto.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -38,6 +37,21 @@
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
+		044E9B3439174DD6A06FD306 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9DF6B684DFFB46648B990022 /* libRNVectorIcons.a */; };
+		8E13715B88114289B3478BF8 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 30B8219C992441238B7A3CC3 /* Entypo.ttf */; };
+		E3457227633F4E878F4CC0CC /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E8BEC994BFDE4A70AC10B468 /* EvilIcons.ttf */; };
+		EB6D3BA0B8F546C99C0B9674 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4397813CE7E748C6A0D73A1F /* Feather.ttf */; };
+		2F50378B9E284EB5A1819DBD /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0167A9675C0F41089B2ABC0F /* FontAwesome.ttf */; };
+		FE7ACB58E7834B4AB08CED67 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 207722383A464F6ABA03CDE4 /* Foundation.ttf */; };
+		E555644A1C44489D9463FEA0 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9097825F02F24A9C8F721309 /* Ionicons.ttf */; };
+		8C43D362726E48F98E9D2F5F /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 792ABCE28E334902837AD696 /* MaterialCommunityIcons.ttf */; };
+		332AEC5A536B43B08CDB9F1E /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6B5A8805E6884466B94BC2F3 /* MaterialIcons.ttf */; };
+		13FF410448F749A4BD4D275D /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5FD41736B515419999163C80 /* Octicons.ttf */; };
+		E9B94F6443E544879C7C368B /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C749DCD8741F4D9E9E649C1A /* SimpleLineIcons.ttf */; };
+		1CA106AFC0134E3EB11B3A73 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 99DE5FB93C4A4F3BB7F21DC0 /* Zocial.ttf */; };
+		E6CE4C9E77E94D47BAC97E48 /* Sunflower-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 888EBBB9C2644F7BA1DA20F0 /* Sunflower-Bold.ttf */; };
+		2C56BD85C0514ADEB5492343 /* Sunflower-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0A832156A25C44219D3322EB /* Sunflower-Light.ttf */; };
+		431EB10EAF874768AF164A41 /* Sunflower-Medium.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C74E215F6DC640C1BA5635D1 /* Sunflower-Medium.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -343,6 +357,22 @@
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
+		A224EAC6EC5D4956A83EB24B /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; name = "RNVectorIcons.xcodeproj"; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		9DF6B684DFFB46648B990022 /* libRNVectorIcons.a */ = {isa = PBXFileReference; name = "libRNVectorIcons.a"; path = "libRNVectorIcons.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		30B8219C992441238B7A3CC3 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E8BEC994BFDE4A70AC10B468 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		4397813CE7E748C6A0D73A1F /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0167A9675C0F41089B2ABC0F /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		207722383A464F6ABA03CDE4 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		9097825F02F24A9C8F721309 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		792ABCE28E334902837AD696 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6B5A8805E6884466B94BC2F3 /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5FD41736B515419999163C80 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C749DCD8741F4D9E9E649C1A /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		99DE5FB93C4A4F3BB7F21DC0 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		888EBBB9C2644F7BA1DA20F0 /* Sunflower-Bold.ttf */ = {isa = PBXFileReference; name = "Sunflower-Bold.ttf"; path = "../app/assets/fonts/Sunflower-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0A832156A25C44219D3322EB /* Sunflower-Light.ttf */ = {isa = PBXFileReference; name = "Sunflower-Light.ttf"; path = "../app/assets/fonts/Sunflower-Light.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C74E215F6DC640C1BA5635D1 /* Sunflower-Medium.ttf */ = {isa = PBXFileReference; name = "Sunflower-Medium.ttf"; path = "../app/assets/fonts/Sunflower-Medium.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -371,6 +401,7 @@
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+				044E9B3439174DD6A06FD306 /* libRNVectorIcons.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -557,6 +588,7 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				A224EAC6EC5D4956A83EB24B /* RNVectorIcons.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -578,6 +610,7 @@
 				00E356EF1AD99517003FC87E /* NextoTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				2BD8375BEFF24B5AB11757CD /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -604,6 +637,28 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		2BD8375BEFF24B5AB11757CD /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				30B8219C992441238B7A3CC3 /* Entypo.ttf */,
+				E8BEC994BFDE4A70AC10B468 /* EvilIcons.ttf */,
+				4397813CE7E748C6A0D73A1F /* Feather.ttf */,
+				0167A9675C0F41089B2ABC0F /* FontAwesome.ttf */,
+				207722383A464F6ABA03CDE4 /* Foundation.ttf */,
+				9097825F02F24A9C8F721309 /* Ionicons.ttf */,
+				792ABCE28E334902837AD696 /* MaterialCommunityIcons.ttf */,
+				6B5A8805E6884466B94BC2F3 /* MaterialIcons.ttf */,
+				5FD41736B515419999163C80 /* Octicons.ttf */,
+				C749DCD8741F4D9E9E649C1A /* SimpleLineIcons.ttf */,
+				99DE5FB93C4A4F3BB7F21DC0 /* Zocial.ttf */,
+				888EBBB9C2644F7BA1DA20F0 /* Sunflower-Bold.ttf */,
+				0A832156A25C44219D3322EB /* Sunflower-Light.ttf */,
+				C74E215F6DC640C1BA5635D1 /* Sunflower-Medium.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -685,7 +740,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0610;
+				LastUpgradeCheck = 610;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
@@ -1050,6 +1105,20 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				8E13715B88114289B3478BF8 /* Entypo.ttf in Resources */,
+				E3457227633F4E878F4CC0CC /* EvilIcons.ttf in Resources */,
+				EB6D3BA0B8F546C99C0B9674 /* Feather.ttf in Resources */,
+				2F50378B9E284EB5A1819DBD /* FontAwesome.ttf in Resources */,
+				FE7ACB58E7834B4AB08CED67 /* Foundation.ttf in Resources */,
+				E555644A1C44489D9463FEA0 /* Ionicons.ttf in Resources */,
+				8C43D362726E48F98E9D2F5F /* MaterialCommunityIcons.ttf in Resources */,
+				332AEC5A536B43B08CDB9F1E /* MaterialIcons.ttf in Resources */,
+				13FF410448F749A4BD4D275D /* Octicons.ttf in Resources */,
+				E9B94F6443E544879C7C368B /* SimpleLineIcons.ttf in Resources */,
+				1CA106AFC0134E3EB11B3A73 /* Zocial.ttf in Resources */,
+				E6CE4C9E77E94D47BAC97E48 /* Sunflower-Bold.ttf in Resources */,
+				2C56BD85C0514ADEB5492343 /* Sunflower-Light.ttf in Resources */,
+				431EB10EAF874768AF164A41 /* Sunflower-Medium.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1181,6 +1250,14 @@
 				);
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Nexto.app/Nexto";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Debug;
 		};
@@ -1198,6 +1275,14 @@
 				);
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Nexto.app/Nexto";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Release;
 		};
@@ -1216,6 +1301,10 @@
 				);
 				PRODUCT_NAME = Nexto;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Debug;
 		};
@@ -1233,6 +1322,10 @@
 				);
 				PRODUCT_NAME = Nexto;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Release;
 		};
@@ -1259,6 +1352,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Debug;
 		};
@@ -1285,6 +1386,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Release;
 		};
@@ -1310,6 +1419,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Nexto-tvOS.app/Nexto-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Debug;
 		};
@@ -1335,6 +1452,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/Nexto-tvOS.app/Nexto-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
+				);
 			};
 			name = Release;
 		};

ios/Nexto/Info.plist

@@ -39,9 +39,8 @@
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
 		<key>NSExceptionDomains</key>
 		<dict>
@@ -52,5 +51,22 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+		<string>Sunflower-Bold.ttf</string>
+		<string>Sunflower-Light.ttf</string>
+		<string>Sunflower-Medium.ttf</string>
+	</array>
 </dict>
 </plist>

package-lock.json

@@ -7357,6 +7357,38 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-native-vector-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.6.0.tgz",
+      "integrity": "sha512-rpfhfPiXCK2PX1nrNhdxSMrEGB/Gw/SvKoPM0G2wAkSoqynnes19K0VYI+Up7DqR1rFIpE4hP2erpT1tNx2tfg==",
+      "requires": {
+        "lodash": "4.17.5",
+        "prop-types": "15.6.1",
+        "yargs": "8.0.2"
+      },
+      "dependencies": {
+        "yargs": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+          "requires": {
+            "camelcase": "4.1.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.2",
+            "os-locale": "2.1.0",
+            "read-pkg-up": "2.0.0",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "2.1.1",
+            "which-module": "2.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "7.0.0"
+          }
+        }
+      }
+    },
     "react-navigation": {
       "version": "1.0.0-beta.22",
       "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-1.0.0-beta.22.tgz",

package.json

@@ -2,6 +2,11 @@
   "name": "Nexto",
   "version": "0.0.1",
   "private": true,
+  "rnpm": {
+    "assets" : [
+      "./app/assets/fonts/"
+    ]
+  },
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest"
@@ -9,7 +14,8 @@
   "dependencies": {
     "react": "16.3.1",
     "react-native": "^0.55.3",
-    "react-native-router-flux": "^4.0.0-beta.28"
+    "react-native-router-flux": "^4.0.0-beta.28",
+    "react-native-vector-icons": "^4.6.0"
   },
   "devDependencies": {
     "babel-jest": "22.4.3",