TrapiLib/modules/BaseHolder/index.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,
			overflow,

			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,
				overflow
			}]}>
	    		{content}
				<View WRAPPER={true} style={ //children Container 
		    	 	[
		    	 	(!!content || stretchContainer) ? styles.stretchToContent : {borderColor:'yellow'},
		    	 	{
		    	 		justifyContent,
						alignItems,
						alignContent,
						flexDirection,
						flexWrap,
						flexFlow
		    	 	}
		    	 	]}>
					{children}
				</View>
 
		    	
		    </View>
		);
	}
}

const styles = StyleSheet.create({
	base: {
		minHeight: 20, 
		// borderColor: 'blue',
		// borderWidth: 1
	}, 
	stretchToContent: {
		position: 'absolute',
		top: 0,
		left: 0,
		bottom: 0,
		right: 0,
		// borderColor: 'red',
		// borderWidth: 1
	},
	contentWrapper: {
	},
	selected: {
		boxShadow: 'inset 0px 0px 1px 1px #fce8e8',
		border: '1px solid #f28d8d',

		// boxShadow: 'inset 0px 0px 1px 1px rgba(250,10,0,0.81)',
		shadowColor: "rgba(250,10,0,0.81)",
		shadowOffset: {
			width: 0,
			height: 4,
		},
		shadowOpacity: 0.30,
		shadowRadius: 4.65,

		elevation: 8
		// border: '1px solid green'
	}
});

BaseHolder.Inputs = {
	width: new Types.Integer(),
	height: new Types.Integer(),
	stretchContainer: new Types.Bool().default(false),
	overflow: new Types.Text().default('visible'),
	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(),
	alignSelf: new Types.Text(),
	flexGrow: new Types.Real(),
	flexShrink: new Types.Real(),
	flexBasis: new Types.Real()
}