setup basic navigation

.gitignore

@@ -42,3 +42,4 @@ android/keystores/debug.keystore
 
 dist/
 typings/
+android/app/src/main/assets/

Makefile

@@ -1,8 +1,7 @@
-
+NODE=$(PWD)/node_modules/.bin
 
 build:
-	rm -rf dist/
+	$(NODE)/tsc
-	tsc
 
 
 install: node_modules typings

android/app/build.gradle

@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-vector-icons')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/zxcvbn/MainActivity.java

@@ -1,6 +1,7 @@
 package com.zxcvbn;
 
 import com.facebook.react.ReactActivity;
+import com.oblador.vectoricons.VectorIconsPackage;
 
 public class MainActivity extends ReactActivity {
 

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
+
     <string name="app_name">zxcvbn</string>
 </resources>

android/settings.gradle

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

ios/zxcvbn.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 */; };
@@ -23,6 +22,15 @@
 		140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		AC837CB69F9B4D1AB280198D /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D89C9404F60344A99A1C4BE6 /* libRNVectorIcons.a */; };
+		0A6B304B72B5403D86F9A2EA /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4DA10A292EF743D9BEFB5089 /* Entypo.ttf */; };
+		464ADB5B08DE42F0B75555B8 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C730D9BC523D4A7CB1B55C43 /* EvilIcons.ttf */; };
+		9CDA3D34C8D6406D9E22BCE0 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 59C25E7A51DB4149AB1A0F42 /* FontAwesome.ttf */; };
+		90913271F7DF4CA0BEE69064 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 83CF2B4CEFB149F5A9114456 /* Foundation.ttf */; };
+		B6B125C8BF7C4589B7D2DBCC /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 654E6742B6884FE180D2F554 /* Ionicons.ttf */; };
+		1CFE37C350A04E9BBF55B3A5 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 047F108934FD4D12AAB8E18C /* MaterialIcons.ttf */; };
+		DAC3600BCC604ADB9482C6EC /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6FB75B872E784A2891511B59 /* Octicons.ttf */; };
+		4611E18C9A0345AAB60AD922 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 706F4CE4421149CB90C3F0CA /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -127,6 +135,16 @@
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
 		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>"; };
+		D87070575A5C440E9BB53EFC /* 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; };
+		D89C9404F60344A99A1C4BE6 /* libRNVectorIcons.a */ = {isa = PBXFileReference; name = "libRNVectorIcons.a"; path = "libRNVectorIcons.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		4DA10A292EF743D9BEFB5089 /* 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; };
+		C730D9BC523D4A7CB1B55C43 /* 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; };
+		59C25E7A51DB4149AB1A0F42 /* 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; };
+		83CF2B4CEFB149F5A9114456 /* 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; };
+		654E6742B6884FE180D2F554 /* 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; };
+		047F108934FD4D12AAB8E18C /* 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; };
+		6FB75B872E784A2891511B59 /* 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; };
+		706F4CE4421149CB90C3F0CA /* 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; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -152,6 +170,7 @@
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+				AC837CB69F9B4D1AB280198D /* libRNVectorIcons.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -274,6 +293,7 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				D87070575A5C440E9BB53EFC /* RNVectorIcons.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -293,6 +313,7 @@
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* zxcvbnTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
+				4685DB9781F94227B1E5E3F0 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -307,6 +328,22 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		4685DB9781F94227B1E5E3F0 /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				4DA10A292EF743D9BEFB5089 /* Entypo.ttf */,
+				C730D9BC523D4A7CB1B55C43 /* EvilIcons.ttf */,
+				59C25E7A51DB4149AB1A0F42 /* FontAwesome.ttf */,
+				83CF2B4CEFB149F5A9114456 /* Foundation.ttf */,
+				654E6742B6884FE180D2F554 /* Ionicons.ttf */,
+				047F108934FD4D12AAB8E18C /* MaterialIcons.ttf */,
+				6FB75B872E784A2891511B59 /* Octicons.ttf */,
+				706F4CE4421149CB90C3F0CA /* Zocial.ttf */,
+			);
+			name = Resources;
+			path = "";
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -352,7 +389,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0610;
+				LastUpgradeCheck = 610;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
@@ -509,6 +546,14 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				0A6B304B72B5403D86F9A2EA /* Entypo.ttf in Resources */,
+				464ADB5B08DE42F0B75555B8 /* EvilIcons.ttf in Resources */,
+				9CDA3D34C8D6406D9E22BCE0 /* FontAwesome.ttf in Resources */,
+				90913271F7DF4CA0BEE69064 /* Foundation.ttf in Resources */,
+				B6B125C8BF7C4589B7D2DBCC /* Ionicons.ttf in Resources */,
+				1CFE37C350A04E9BBF55B3A5 /* MaterialIcons.ttf in Resources */,
+				DAC3600BCC604ADB9482C6EC /* Octicons.ttf in Resources */,
+				4611E18C9A0345AAB60AD922 /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -586,6 +631,10 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/zxcvbn.app/zxcvbn";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 			};
 			name = Debug;
 		};
@@ -599,6 +648,10 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/zxcvbn.app/zxcvbn";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
 			};
 			name = Release;
 		};
@@ -611,6 +664,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 				INFOPLIST_FILE = "zxcvbn/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -631,6 +685,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 				INFOPLIST_FILE = "zxcvbn/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -681,6 +736,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
@@ -721,6 +777,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;

ios/zxcvbn/Info.plist

@@ -1,54 +1,64 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
+  <dict>
-	<key>CFBundleDevelopmentRegion</key>
+    <key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
+    <string>en</string>
-	<key>CFBundleExecutable</key>
+    <key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
+    <string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
+    <key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+    <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
+    <key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
+    <string>6.0</string>
-	<key>CFBundleName</key>
+    <key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
+    <string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
+    <key>CFBundlePackageType</key>
-	<string>APPL</string>
+    <string>APPL</string>
-	<key>CFBundleShortVersionString</key>
+    <key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+    <string>1.0</string>
-	<key>CFBundleSignature</key>
+    <key>CFBundleSignature</key>
-	<string>????</string>
+    <string>????</string>
-	<key>CFBundleVersion</key>
+    <key>CFBundleVersion</key>
-	<string>1</string>
+    <string>1</string>
-	<key>LSRequiresIPhoneOS</key>
+    <key>LSRequiresIPhoneOS</key>
-	<true/>
+    <true/>
-	<key>UILaunchStoryboardName</key>
+    <key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
+    <string>LaunchScreen</string>
-	<key>UIRequiredDeviceCapabilities</key>
+    <key>UIRequiredDeviceCapabilities</key>
-	<array>
+    <array>
-		<string>armv7</string>
+      <string>armv7</string>
-	</array>
+    </array>
-	<key>UISupportedInterfaceOrientations</key>
+    <key>UISupportedInterfaceOrientations</key>
-	<array>
+    <array>
-		<string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
+    </array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
+    <false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
+    <key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+    <string/>
-	<key>NSAppTransportSecurity</key>
+    <key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
+    <dict>
-	<dict>
+      <key>NSExceptionDomains</key>
-		<key>NSExceptionDomains</key>
+      <dict>
-		<dict>
+        <key>localhost</key>
-			<key>localhost</key>
+        <dict>
-			<dict>
+          <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
-				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+          <true/>
-				<true/>
+        </dict>
-			</dict>
+      </dict>
-		</dict>
+    </dict>
-	</dict>
+    <key>UIAppFonts</key>
-</dict>
+    <array>
+      <string>Entypo.ttf</string>
+      <string>EvilIcons.ttf</string>
+      <string>FontAwesome.ttf</string>
+      <string>Foundation.ttf</string>
+      <string>Ionicons.ttf</string>
+      <string>MaterialIcons.ttf</string>
+      <string>Octicons.ttf</string>
+      <string>Zocial.ttf</string>
+    </array>
+  </dict>
 </plist>

package.json

@@ -4,13 +4,14 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "build": "rm -rf dist && tsc"
+    "link": "rnpm link"
   },
   "dependencies": {
     "immutable": "=3.8.1",
     "react": "=15.3.1",
     "react-native": "=0.33.0",
     "react-native-progress-bar": "=0.1.2",
+    "react-native-vector-icons": "=2.1.0",
     "underscore": "=1.8.3",
     "zxcvbn": "=4.3.0"
   },

src/index.tsx

@@ -1,43 +1,50 @@
-// src/index.ts
-
 import React, { Component } from 'react';
 import {
-    StyleSheet,
+  Text,
-    Text,
+  View,
-    View
+  Navigator,
+  StyleSheet
 } from 'react-native';
+import Routes from './navigation/Routes';
+import RouteMapper from './navigation/RouteMapper';
+import './types';
 
-interface Props {
-
-}
-
-interface State {
-
-}
-
-export default class App extends Component<Props, State> {
-    render() {
-        return (
-            <View style={styles.container}>
-                <Text style={styles.text}>
-                    Welcome to React Native!
-                </Text>
-            </View>
-        );
-    }
-}
 
 const styles = StyleSheet.create({
-    container: {
+  wrapper: {
-        flex: 1,
+    flex: 1
-        justifyContent: 'center',
+  } as React.ViewStyle,
-        alignItems: 'center',
+  navbar: {
-        backgroundColor: '#F5FCFF',
+    flexDirection: 'row',
-    } as React.ViewStyle,
+    justifyContent: 'center',
-
+    backgroundColor: '#888'
-    text: {
+  } as React.ViewStyle
-        fontSize: 20,
-        textAlign: 'center',
-        margin: 10,
-    } as React.TextStyle,
 });
+
+export default class App extends Component<any, any> {
+  renderScene(route: any, nav : any) {
+    const Component = route.component;
+    const props = route.props || {};
+    return (
+      <Component
+        nav={nav}
+        currentRoute={route}
+        {...props} />
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.wrapper}>
+        <Navigator
+          renderScene={this.renderScene}
+          initialRoute={Routes.main}
+          navigationBar={
+            <Navigator.NavigationBar
+              style={styles.navbar}
+              routeMapper={RouteMapper} />
+          } />
+      </View>
+    );
+  }
+}

src/navigation/BackButton.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+
+import  {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  Text
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  } as React.ViewStyle,
+  toolbarButton: {
+    paddingHorizontal: 15,
+  } as React.ViewStyle,
+  text: {
+    color: '#000',
+    paddingHorizontal: 10
+  } as React.TextStyle
+});
+
+
+export default class BackButton extends Component<any, any> {
+  goBack() {
+    this.props.nav.pop();
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          style={styles.toolbarButton}
+          underlayColor="transparent"
+          onPress={this.goBack.bind(this)}>
+          <Text style={styles.text}><Icon name="chevron-left" size={20} /></Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}

src/navigation/InfoButton.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+
+import {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  Text
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  } as React.ViewStyle,
+  toolbarButton: {
+    paddingHorizontal: 15,
+  } as React.ViewStyle,
+  text: {
+    color: '#FFF',
+    fontSize: 18,
+  } as React.TextStyle
+});
+
+export default class InfoButton extends Component<any, any> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          style={styles.toolbarButton}
+          underlayColor="transparent"
+          onPress={() => null}>
+          <Icon name="info" style={styles.text} />
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}

src/navigation/RouteMapper.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+  Text,
+  View
+} from 'react-native';
+
+import BackButton from './BackButton';
+import InfoButton from './InfoButton';
+import Title from './Title'
+
+export default {
+  LeftButton: function (route: any, navigator: any, index: number, navState: any) {
+    if (index >= 1) {
+      return (
+        <BackButton nav={navigator} />
+      );
+    }
+    return <View />;
+  },
+
+  RightButton: function (route: any, navigator: any, index: number, navState: any) {
+    return <InfoButton nav={navigator} />;
+  },
+
+  Title: function (route: any, navigator: any, index: number, navState: any) {
+    return <Title route={route} />;
+  }
+}

src/navigation/Routes.ts

@@ -0,0 +1,8 @@
+import Main from '../views/main';
+
+export default {
+  main: {
+    id: 'main',
+    component: Main
+  }
+};

src/navigation/Title.tsx

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+import  {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  } as React.ViewStyle,
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    color: '#FFF'
+  } as React.TextStyle
+});
+
+export default class Title extends Component<any, any> {
+  render() {
+    const title = this.props.route.title || 'zxcvbn';
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{ title }</Text>
+      </View>
+    );
+  }
+}

src/types/index.ts

@@ -0,0 +1,6 @@
+// Define extra types to keep typescript happy!
+
+declare module "react-native-vector-icons/FontAwesome" {
+  var noTypeInfoYet: any; // any var name here really
+  export = noTypeInfoYet;
+}

src/views/main.tsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  } as React.ViewStyle,
+
+  text: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  } as React.TextStyle,
+});
+
+export default class App extends Component<any, any> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          Welcome to React Native!
+        </Text>
+      </View>
+    );
+  }
+};

typings.json

@@ -5,6 +5,7 @@
   },
   "globalDependencies": {
     "react": "registry:dt/react#0.14.0+20160829191040",
-    "react-native": "registry:dt/react-native#0.29.0+20160830141535"
+    "react-native": "registry:dt/react-native#0.29.0+20160830141535",
+    "underscore": "registry:dt/underscore#1.8.3+20160908111004"
   }
 }