wip one side

index.js

@@ -1,5 +1,6 @@
 import 'core-js';
 import { AppRegistry } from 'react-native';
 import { name as appName } from './app.json';
+import 'intl';
 
 AppRegistry.registerComponent(appName, () => require('./App').default);

src/components/sideMenu/view/sideMenuStyles.js

@@ -13,9 +13,9 @@ export default EStyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  headerContentView: {
+  headerContentWrapper: {
     alignItems: 'center',
-    flex: 1,
+    height: 50,
     flexDirection: 'row',
   },
   contentView: {
@@ -38,7 +38,7 @@ export default EStyleSheet.create({
     borderColor: '$borderColor',
   },
   userInfoView: {
-    alignSelf: 'center',
+    alignSelf: 'flex-end',
     marginLeft: 15,
   },
   username: {
@@ -74,18 +74,18 @@ export default EStyleSheet.create({
     color: '$white',
     backgroundColor: 'transparent',
   },
-  addAccountIconView: {
+  addAccountWrapper: {
     alignSelf: 'flex-end',
     justifyContent: 'center',
     flex: 1,
     flexDirection: 'row',
   },
   addAccountIcon: {
-    padding: 10,
+    // padding: 10,
   },
   itemWrapper: {
     flexDirection: 'row',
-    marginVertical: 20,
-    marginLeft: 48,
+    marginVertical: 10,
+    marginLeft: '$deviceWidth / 20',
   },
 });

src/components/sideMenu/view/sideMenuView.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  View, Text, ImageBackground, FlatList, TouchableHighlight, Image,
+  View, Text, ImageBackground, FlatList, TouchableOpacity, Image,
 } from 'react-native';
 import { injectIntl } from 'react-intl';
 import LinearGradient from 'react-native-linear-gradient';
@@ -83,7 +83,7 @@ class SideMenuView extends Component {
             style={{ width: '100%', height: '100%', flexDirection: 'row' }}
           >
             {isLoggedIn && (
-              <View style={styles.headerContentView}>
+              <View style={styles.headerContentWrapper}>
                 <Image style={styles.userAvatar} source={_avatar} defaultSource={DEFAULT_IMAGE} />
                 <View style={styles.userInfoView}>
                   {currentAccount.display_name && (
@@ -91,7 +91,7 @@ class SideMenuView extends Component {
                   )}
                   <Text style={styles.usernick}>{`@${currentAccount.name}`}</Text>
                 </View>
-                <View style={styles.addAccountIconView}>
+                <View style={styles.addAccountWrapper}>
                   {/* TODO: delete android name */}
                   <IconButton
                     name={isAddAccountIconActive ? 'arrow-dropup' : 'add-circle-outline'}
@@ -112,7 +112,7 @@ class SideMenuView extends Component {
           <FlatList
             data={menuItems}
             renderItem={item => (
-              <TouchableHighlight
+              <TouchableOpacity
                 style={styles.listItem}
                 onPress={() => {
                   if (item.item.route) {
@@ -145,7 +145,7 @@ class SideMenuView extends Component {
                       : intl.formatMessage({ id: `side_menu.${item.item.id}` })}
                   </Text>
                 </View>
-              </TouchableHighlight>
+              </TouchableOpacity>
             )}
           />
         </View>