1 files changed, 145 insertions, 0 deletions
diff --git a/frontend/app/components/navBar.js b/frontend/app/components/navBar.js
new file mode 100644
index 0000000..2947209
--- /dev/null
+++ b/frontend/app/components/navBar.js
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import { DrawerActions } from 'react-navigation';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { RkText, RkButton, RkStyleSheet } from 'react-native-ui-kitten';
+import { FontAwesome } from '../assets/icons';
+import { UIConstants } from '../config/appConstants';
+import NavigationType from '../config/navigation/propTypes';
+
+export class NavBar extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+    headerProps: PropTypes.shape().isRequired,
+  };
+
+  onNavigationLeftMenuButtonPressed = () => {
+    this.props.navigation.dispatch(DrawerActions.openDrawer());
+  };
+
+  onNavigationLeftBackButtonPressed = () => {
+    this.props.navigation.goBack();
+  };
+
+  renderTitleItem = (title, options) => {
+    const isCustom = options !== undefined;
+    return isCustom ? this.renderCustomTitleItem(options) : this.renderNavigationTitleItem(title);
+  };
+
+  renderLeftItem = (options) => {
+    const isCustom = options !== undefined;
+    return isCustom ? this.renderCustomLeftItem(options) : this.renderNavigationLeftItem();
+  };
+
+  renderRightItem = (options) => {
+    const isCustom = options !== undefined;
+    return isCustom ? this.renderCustomRightItem(options) : this.renderNavigationRightItem();
+  };
+
+  renderNavigationTitleItem = (title) => (
+    <View style={styles.title}>
+      <RkText>{title}</RkText>
+    </View>
+  );
+
+  renderNavigationLeftBackItem = () => (
+    <RkButton
+      rkType='clear'
+      style={styles.menu}
+      onPress={this.onNavigationLeftBackButtonPressed}>
+      <RkText rkType='awesome hero'>{FontAwesome.chevronLeft}</RkText>
+    </RkButton>
+  );
+
+  renderNavigationLeftMenuItem = () => (
+    <RkButton
+      rkType='clear'
+      style={styles.menu}
+      onPress={this.onNavigationLeftMenuButtonPressed}>
+      <RkText rkType='awesome'>{FontAwesome.bars}</RkText>
+    </RkButton>
+  );
+
+  renderNavigationLeftItemContent = (sceneIndex) => {
+    const isFirstScene = sceneIndex === 0;
+    return isFirstScene ? this.renderNavigationLeftMenuItem() : this.renderNavigationLeftBackItem();
+  };
+
+  renderNavigationLeftItem = () => {
+    const sceneIndex = _.findIndex(this.props.headerProps.scenes, { isActive: true });
+    return (
+      <View style={styles.left}>
+        {this.renderNavigationLeftItemContent(sceneIndex)}
+      </View>
+    );
+  };
+
+  renderNavigationRightItem = () => undefined;
+
+  renderCustomTitleItem = (options) => (
+    <View
+      style={styles.title}>
+      {options}
+    </View>
+  );
+
+  renderCustomLeftItem = (options) => (
+    <View style={styles.left}>{options}</View>
+  );
+
+  renderCustomRightItem = (options) => (
+    <View style={styles.right}>{options}</View>
+  );
+
+  render() {
+    const { options } = this.props.headerProps.scene.descriptor;
+    return (
+      <View style={styles.layout}>
+        <View style={styles.container}>
+          {this.renderTitleItem(options.title, options.headerTitle)}
+          {this.renderLeftItem(options.headerLeft)}
+          {this.renderRightItem(options.headerRight)}
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  layout: {
+    backgroundColor: theme.colors.screen.base,
+    paddingTop: UIConstants.StatusbarHeight,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.colors.border.base,
+  },
+  container: {
+    flexDirection: 'row',
+    height: UIConstants.AppbarHeight,
+
+  },
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  right: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  title: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  menu: {
+    width: 40,
+  },
+}));