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>
+    )
+  }
+}

mobile/src/ui/Icon.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Image } from 'react-native'
+import PropTypes from 'prop-types'
+
+const images = {
+  logout: require('./images/logout.png'),
+  glasses: require('./images/ar-glasses.png'),
+  back: require('./images/back.png'),
+  hand: require('./images/hand.png'),
+  center: require('./images/center.png'),
+  rightArrow: require('./images/right-arrow.png'),
+  search: require('./images/search.png'),
+  settings: require('./images/settings.png'),
+}
+
+export class Icon extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number,
+    margin: PropTypes.number,
+    style: PropTypes.object,
+  }
+
+  static defaultProps = {
+    size: 50,
+    margin: 0,
+  }
+
+  render() {
+    let { size, name, margin, style } = this.props
+    let source = images[name] || images['hand']
+
+    size -= margin * 2
+
+    return <Image style={[{ width: size, height: size, margin }, style]} source={source} resizeMode='stretch' />
+  }
+}

mobile/src/ui/index.js

@@ -1,3 +1,5 @@
 export { BoundSwitch } from './BoundSwitch'
 export { BoundInput } from './BoundInput'
 export { BoundButton } from './BoundButton'
+export { Icon } from './Icon'
+export { Header } from './Header'