Editor/Systems/MainBar.js

import React from 'react';
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() {
		super();
		this.items = [];
	}
	addItem(item) {
		this.items.push(item);
		return this;
	}
	show() { this.visible = true; this.forceUpdate() }
	hide() { this.visible = false; this.forceUpdate() }
	toggle() { this.visible = !this.visible; this.forceUpdate() }
	render() {
		return this.visible ? <div style={{position:'relative', left: 0, top: 50}}
						onMouseLeave={() => this.hide()}>
			<View style={styles.menu}>
			{this.items.map((item) => {
				let {
					text,
					...rest
				} = item;
				return <View style={{cursor: 'pointer'}} {...rest}>
					<Text>{item.text}</Text>
				</View>
			})}
			</View>
		</div> : null;
	}
}

export default class MainBar extends BaseSystem {
	constructor(CS){
		super();
		this.__save = null
		this.CoreSystem = CS;
		this.Menu = new Menu();
		this.Menu.addItem({
			text: "New page",
			onClick: () => this.createPage()
		}).addItem({
			text: "Save",
			onClick: () => this.save()
		}).addItem({
			text: "Export",
			onClick: () => this.export()
		}).onUpdate(() => this.forceUpdate());
	}

	export() {
		let json = JSON.stringify(this.CoreSystem.export());
		console.log(json);
	}

	onSave(fn){
		this.__save = fn;
	}

	save(){
		this.__save && this.__save();
	}

	triggerSave(){
		this.save();
	}

	createPage() {
		// think!
		// Create a new page on CoreSystem
		// switch to it as active view
		// Decide how page switching works
		
	}

	none(){
		
	}
	toggleMenu() {
		this.Menu.toggle();
	}
	showMenu() {
		this.Menu.show();
	}
	hideMenu() {
		this.Menu.hide();
	}
	render(){
		return (
		<View style={styles.container}>
			<View style={ styles.innerContainer }>
	  			<Text  style={styles.item}>
					<Icon
						name='menu'
	  					color="#606060"
	  					onPress={(e) => this.toggleMenu()}
	  				/>
	  			</Text>
	  			<Text  style={styles.item}>
	  				<Icon 
		  				name='home' 
		  				color="#606060"
	  				/>
	  			</Text>
	  			<Text  style={[styles.item, styles.selectedItem]}>
	  				Design
	  			</Text>
	  			<Text  style={styles.item}>
	  				Structure
	  			</Text>

  			</View>
  			<View style={ styles.innerContainer }>
				<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}
					onPress={(e) => this.triggerSave()} 
					title="Save"
	  				color="#606060" 
	  			>Save</Text>
	  			<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}
					onPress={(e) => this.export()} 
					title="Export"
	  				color="#606060" 
	  			>Export</Text>
	  			<Text style={[styles.item, {fontSize: 18, lineHeight: 24}]}>
	  				Giorgos Markou
	  			</Text>
	  			<Text style={styles.item}>
	  				<Icon name="account-circle" color="#606060"/>
	  			</Text>
	  		</View>
  			{this.Menu.render()}
		</View>)
	}
}


const styles = StyleSheet.create({
	container:{
		flex:1,
		paddingRight:8,
		paddingLeft:8,
		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,
		fontFamily: 'thin',
		lineHeight: 25,
		cursor: 'pointer'
	},
	selectedItem: {
		borderColor: '#36BBAD',
		borderBottomWidth: 1
	},
	menu: {
		height:100,
		width: 200,
		backgroundColor: 'gray'
	}
})