MainBar

Systems/MainBar.js

@@ -3,6 +3,7 @@ import {StyleSheet, View, Text , Button } from 'react-native';
 import { Icon } from 'react-native-elements'
 import {  TextInput } from 'react-native';
 import BaseSystem from './System'
+import { Ionicons } from '@expo/vector-icons';
 
 class Menu extends BaseSystem {
 	constructor() {
@@ -92,36 +93,38 @@ export default class MainBar extends BaseSystem {
 	render(){
 		return (
 		<View style={styles.container}>
-			<View style={ {flexDirection: 'row'} }>
-				<Button 
-					color="#f1f1f1"
-					title={<Icon name='menu'
+			<View style={ styles.innerContainer }>
+	  			<Text  style={styles.item}>
+					<Icon
+						name='menu'
 	  					color="#606060"
-	  				/>}
-	  				onPress={(e) => this.toggleMenu()}
-	  			/>
-	  			<Button 
-					color="#f1f1f1"
-					title={<Icon  name='home'
-	  					color="#606060"
-	  				/>}
-	  			/>
+	  					onPress={(e) => this.toggleMenu()}
+	  				/>
+	  			</Text>
+	  			<Text  style={styles.item}>
+	  				<Icon 
+		  				name='home' 
+		  				color="#606060"
+	  				/>
+	  			</Text>
   			</View>
-  			<View style={ {flexDirection: 'row'} }>
-				<Button
+  			<View style={ styles.innerContainer }>
+				<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}
 					onPress={(e) => this.triggerSave()} 
 					title="Save"
 	  				color="#606060" 
-	  			/>
-	  			<Button
+	  			>Save</Text>
+	  			<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}
 					onPress={(e) => this.export()} 
 					title="Export"
 	  				color="#606060" 
-	  			/>
-	  			<Text>
+	  			>Export</Text>
+	  			<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}>
 	  				Giorgos Markou
 	  			</Text>
-	  			<Icon name="account_circle" type="material" color="#606060"/>
+	  			<Text style={styles.item}>
+	  				<Icon name="account-circle" color="#606060"/>
+	  			</Text>
 	  		</View>
   			{this.Menu.render()}
 		</View>)
@@ -134,12 +137,22 @@ const styles = StyleSheet.create({
 		flex:1,
 		paddingRight:8,
 		paddingLeft:8,
-		paddingTop: 16,
-		paddingBottom: 16,
-		height: 64,
+		paddingTop: 8,
+		paddingBottom: 8,
 		flexDirection:'row',
 		justifyContent: 'space-between'
 	},
+	innerContainer: {
+		flexDirection: 'row',
+		paddingTop: 4,
+		paddingLeft: 0,
+		paddingRight: 0,
+		paddingBottom: 4
+	},
+	item: {
+		paddingLeft: 8,
+		paddingRight: 8
+	},
 	menu: {
 		height:100,
 		width: 200,