top bar component

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "react-native" // this is required for debugging with react-native/packager/transformer
+  ],
+  "plugins": [],
+  "sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
+  // because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
+}

android/app/build.gradle

@@ -82,6 +82,13 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
+
+/**
+ * React Native Icons build-time support
+ * https://github.com/oblador/react-native-vector-icons
+ */
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
 android {
     compileSdkVersion 23
     buildToolsVersion "23.0.1"
@@ -129,6 +136,7 @@ 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 project(':react-native-vector-icons') // From node_modules
 }
 
 // Run this once to be able to run the application with BUCK

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

@@ -13,6 +13,8 @@ import com.facebook.soloader.SoLoader;
 import java.util.Arrays;
 import java.util.List;
 
+import com.oblador.vectoricons.VectorIconsPackage;
+
 public class MainApplication extends Application implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@@ -24,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,7 @@
 rootProject.name = 'AreThereCookies'
 
 include ':app'
+
+include ':react-native-vector-icons'
+
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

index.android.js

@@ -5,39 +5,28 @@
  */
 
 import React, { Component } from "react";
-import { AppRegistry, StyleSheet, Text, View, Navigator } from "react-native";
+import { AppRegistry, Navigator, Text, View } from "react-native";
+import TopBar from "./js/components/top_bar";
 
-class WelcomeView extends Component {
-  props: { title: string };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          {this.props.title}
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#F5FCFF"
-  },
-  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
-  instructions: { textAlign: "center", color: "#333333", marginBottom: 5 }
-});
+const appContainerStyle = {
+  flex: 1,
+  flexDirection: "column",
+  backgroundColor: "white"
+};
 
 export default class AreThereCookies extends Component {
   render() {
     return (
       <Navigator
         initialRoute={{ title: "AreThereCookies?", index: 0 }}
-        renderScene={(route, navigator) => <WelcomeView title={route.title} />}
+        renderScene={(route, navigator) => (
+          <View style={appContainerStyle}>
+            <TopBar />
+            <View>
+              <Text>Scene content will go here...</Text>
+            </View>
+          </View>
+        )}
       />
     );
   }

js/components/top_bar.js

@@ -0,0 +1,35 @@
+//@flow
+import React, { Component } from "react";
+import { Text, View } from "react-native";
+import EntypoIcon from "react-native-vector-icons/Entypo";
+
+const barStyle = {
+  flexDirection: "row",
+  height: 50,
+  backgroundColor: "whitesmoke"
+};
+
+const titleTextStyle = {
+  flex: 3,
+  textAlign: "center",
+  fontSize: 18,
+  height: 50,
+  textAlignVertical: "center",
+  fontFamily: "sans-serif",
+  fontWeight: "bold"
+};
+
+export default class TopBar extends Component {
+  props: { active: boolean, title: string, toggleMenu: Function };
+  render() {
+    return (
+      <View style={barStyle}>
+        <EntypoIcon name="menu" size={30} style={{ padding: 10 }} />
+        <Text style={titleTextStyle}>
+          Are There Cookies?
+        </Text>
+        <EntypoIcon name="magnifying-glass" size={20} style={{ padding: 15 }} />
+      </View>
+    );
+  }
+}

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "react": "^15.4.2",
-    "react-native": "^0.40.0"
+    "react-native": "^0.40.0",
+    "react-native-vector-icons": "^4.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

yarn.lock

@@ -3424,6 +3424,13 @@ react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
 
+react-native-vector-icons@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.0.0.tgz#6a2f8f4c6ace613aed7748cd530809283e5b1538"
+  dependencies:
+    lodash "^4.0.0"
+    yargs "^6.3.0"
+
 react-native@^0.40.0:
   version "0.40.0"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.40.0.tgz#ca7b86a8e8fbc7653634ad47ca2ffd69fdf18ad5"