Editor/Components/ContainerEditor.js

import React, { useState } from 'react';
import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
import { Icon } from 'react-native-elements'

import TypeHandler from './TypeHandler.js';
import Library from 'trapilib/dist/lib';

let { DataTypes } = Library;
export default class ContainerEditor extends React.Component {
	constructor(props) {
		super(props);
	}

    createHandler(Structure, viewNodeProps, key, onChange, title) {
    	let Editor = TypeHandler(Structure);
		let editorProps = {
			title: title || key,
			onChange: (value) => {
				onChange && onChange(value, key)
			}
		};


		switch(Structure.type){
			case DataTypes.Types.Array:
				editorProps.value = viewNodeProps[key];
				break;
			case DataTypes.Types.Integer:
			case DataTypes.Types.Real:
			case DataTypes.Types.Bool:
				editorProps.value = viewNodeProps[key];
				break;
			case DataTypes.Types.Text:
				editorProps.value = viewNodeProps[key];
				break;
			default:
				//Must create a generic Vuiew Component
				return (<View></View>)
		}

		return <Editor {...editorProps} key={key}/>
    }
    
    update(key, val) {
    	this.props.onChange && this.props.onChange(key, val);
    }

	render() {
		let {
			structure,
			nodeProps
		} = this.props;
		return (
			<View style={styles.container}>
				<View style={styles.row}>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'width', (val) => this.update('width', val), 'W')}
					</View>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'height', (val) => this.update('height', val), 'H')}
					</View>
				</View>
				<View style={styles.row}>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'paddingTop', (val) => this.update('paddingTop', val), 'Top')}
					</View>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'paddingBottom', (val) => this.update('paddingBottom', val), 'Bottom')}
					</View>
				</View>
				<View style={styles.row}>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'marginLeft', (val) => this.update('marginLeft', val), 'Left')}
					</View>
					<View style={styles.col}>
						{this.createHandler(structure, nodeProps, 'marginRight', (val) => this.update('marginRight', val), 'Right')}
					</View>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container:{
		padding:15,
		flexDirection: 'column',
		justifyContent: 'space-around',
		borderBottomColor: '#B4B4B4',
        borderBottomWidth: 1
	},
	col: {
		padding: 4,
		paddingTop: 0,
		width: '50%'
	},
	row: {
		flexDirection: 'row',
		justifyContent: 'space-around'
	},
	iconStyle: {
		fontSize: 18,
		opacity: 0.6,
		cursor: 'pointer'
	}
})