TrapiLib/modules/BaseHolder.js

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

import Types from '../lib/Types';

export default class BaseHolder extends React.Component {
	constructor(props){
		super(props);
	}

	render() {
		let {
			children,
			selected,

			justifyContent,
			alignItems,
			alignContent,
			flexDirection,
			flexWrap,
			flexFlow,

			order,
			alignSelf,
			flexGrow,
			flexShrink,
			flexBasis,

			width,
			height,

			stretchContainer,
			content,
			...restProps
		} = this.props;

		let styl = [styles.base];
		if (selected) styl.push(styles.selected);
		if (stretchContainer) styl.push(styles.stretchToContent);
		return (
			// self container
		    <View {...restProps} style={[styl, {
		    	order,
				alignSelf,
				flexGrow,
				flexShrink,
				flexBasis,
				width,
				height
			}]}>
		    	{content}

		    	<View WRAPPER={true} style={ //children Container 
		    	 	[
		    	 	!!content || stretchContainer ? styles.stretchToContent : {},
		    	 	{
		    	 		justifyContent,
						alignItems,
						alignContent,
						flexDirection,
						flexWrap,
						flexFlow
		    	 	}
		    	 	]}>
					{children}
				</View>
		    </View>
		);
	}
}

const styles = StyleSheet.create({
	base: {
		minHeight: 10
	},
	stretchToContent: {
		position: 'absolute',
		top: 0,
		left: 0,
		bottom: 0,
		right: 0,
		overflow: 'hidden'
	},
	selected: {
		boxShadow: 'inset 0px 0px 1px 1px rgba(250,10,0,0.81)',
		border: '1px solid green'
	}
});

BaseHolder.Inputs = {
	width: new Types.Integer(),
	height: new Types.Integer(),
	justifyContent: new Types.Text().default("flex-start"),
	alignItems: new Types.Text(),
	alignContent: new Types.Text(),
	flexDirection: new Types.Text(),
	flexWrap: new Types.Text(),
	flexFlow: new Types.Text(),
	order: new Types.Text(),
	alignSelf: new Types.Text(),
	flexGrow: new Types.Text(),
	flexShrink: new Types.Text(),
	flexBasis: new Types.Text()
}