Added Header, Icon and MessageModal. Refactor screens into directories.

mobile/src/ui/Header.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { View, TouchableOpacity, Text } from 'react-native'
+import { Icon } from './Icon'
+import PropTypes from 'prop-types'
+import { ifIphoneX } from 'react-native-iphone-x-helper'
+
+const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
+
+export class Header extends Component {
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    leftButton: PropTypes.shape(headerButtonShape),
+    rightButton: PropTypes.shape(headerButtonShape),
+  }
+
+  render() {
+    const { title, leftButton, rightButton } = this.props
+
+    return (
+      <View style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        height: 45,
+        backgroundColor: '#F4F4F4',
+        ...ifIphoneX({ marginTop: 50 }, { marginTop: 20 })
+      }}>
+        <TouchableOpacity onPress={leftButton.onPress}>
+          <Icon name={leftButton.icon} size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
+        </TouchableOpacity>
+        <Text style={{ color: 'gray', fontSize: 18, }}>{title}</Text>
+        <TouchableOpacity onPress={rightButton.onPress}>
+          <Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'gray' }} />
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}