top tabs

js/App.js

@@ -56,7 +56,7 @@ export default class App extends Component {
                                 placeholder: 'Search (todo)',
                             }}
                         />
-                        <route.component />
+                        <route.component route={route} navigator={navigator} />
                     </View>
                 </SideMenu>
             </ThemeProvider>

js/components/TopTabs.js

@@ -0,0 +1,53 @@
+// @flow
+import React, { Component } from 'react';
+import Routes, { Route } from '../routes';
+import { Text, View, TouchableHighlight } from 'react-native';
+import theme from '../ui-theme.js';
+import { COLOR } from 'react-native-material-ui';
+
+type TopTabProps = { title: string, selected: boolean, onPress?: Function };
+const TopTab = ({ title, selected, onPress }: TopTabProps) => {
+    const borderColor = selected ? COLOR.black : 'transparent';
+    return (
+        <TouchableHighlight
+            onPress={onPress}
+            style={{ flex: 2, borderBottomWidth: 2, borderBottomColor: borderColor, alignItems: 'center' }}
+        >
+            <Text
+                style={{
+                    marginVertical: 20,
+                    fontSize: theme.topTabs.tabTitleSize,
+                }}
+            >
+                {title}
+            </Text>
+        </TouchableHighlight>
+    );
+};
+
+export default class TopTabs extends Component {
+    static displayName = 'TopTabs';
+
+    props: {
+        route: Route,
+        navigator: {
+            replace: (route: Route) => void,
+        },
+    };
+
+    render() {
+        const { route, navigator } = this.props;
+        return (
+            <View style={{ ...theme.topTabs.container, flexDirection: 'row' }}>
+                {[Routes.food, Routes.places].map(tabRoute => (
+                    <TopTab
+                        key={tabRoute.title}
+                        title={tabRoute.title.toUpperCase()}
+                        selected={tabRoute === route}
+                        onPress={() => navigator.replace(tabRoute)}
+                    />
+                ))}
+            </View>
+        );
+    }
+}

js/pages/DrawerMenu.js

@@ -1,14 +1,14 @@
 // @flow
 import React, { Component } from 'react';
 import { Drawer, Avatar } from 'react-native-material-ui';
-import routes from '../routes';
+import routes, { Route } from '../routes';
 
 type Props = {
     navigator: Object,
-    route: Object,
+    route: Route,
 };
 
-export default class DrawerMenu extends Component {
+export default class DrawerMenu extends Component<void, Props, void> {
     static displayName = 'DrawerMenu';
 
     props: Props;

js/pages/Food.js

@@ -2,9 +2,11 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import theme from '../ui-theme';
+import type { Route } from '../routes';
+import TopTabs from '../components/TopTabs';
 
 type Props = {
-    route: Object,
+    route: Route,
     navigator: Object,
 };
 
@@ -14,8 +16,10 @@ export default class Food extends Component {
     props: Props;
 
     render() {
+        const { route, navigator } = this.props;
         return (
             <View style={theme.page.container}>
+                <TopTabs route={route} navigator={navigator} />
                 <Text>Food!</Text>
             </View>
         );

js/pages/Places.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import theme from '../ui-theme';
+import TopTabs from '../components/TopTabs';
 
 type Props = {
     route: Object,
@@ -14,8 +15,10 @@ export default class Places extends Component {
     props: Props;
 
     render() {
+        const { route, navigator } = this.props;
         return (
             <View style={theme.page.container}>
+                <TopTabs route={route} navigator={navigator} />
                 <Text>Places!</Text>
             </View>
         );

js/routes.js

@@ -1,4 +1,5 @@
 // @flow
+import React from 'react';
 import { PropTypes } from 'react';
 import Food from './pages/Food';
 import Places from './pages/Places';
@@ -10,6 +11,12 @@ const {
     string,
 } = PropTypes;
 
+export type Route = {
+    title: string,
+    component: React.Component<any, any, any>,
+    icon: string,
+};
+
 export default {
     food: {
         title: 'Food',

js/ui-theme.js

@@ -15,9 +15,22 @@ export default {
         titleText: { color: COLOR.grey800 },
         leftElement: { color: COLOR.grey800 },
         rightElement: { color: COLOR.grey800 },
-        container: { backgroundColor: COLOR.grey200, height: 50 },
+        container: {
+            backgroundColor: COLOR.grey200,
+            height: 50,
+            elevation: 0,
+        },
     },
     page: {
         container: { flex: 1, backgroundColor: COLOR.white },
     },
+    topTabs: {
+        selectedTabColor: COLOR.black,
+        tabTitleSize: 16,
+        container: {
+            backgroundColor: COLOR.grey200,
+            height: 50,
+            elevation: 5,
+        },
+    },
 };