import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default class Environment {

	constructor(CS) {
		this.CoreSystem = CS;
	}

	render() {
		return <View style={styles.container}>
          	<View style={styles.row}>
	          		<Text>Row</Text>

          	</View>
			<View style={styles.row}>
	          	<View style={styles.col}>
	          		<Text>Col</Text>
	          	</View>
	          	<View style={[styles.mobileView, styles.col]}>
	         		{this.CoreSystem.render()}
	          	</View>
	          	<View style={styles.col}>
	          		<Text>Col</Text>
	          	</View>
	        </View>
          	<View style={styles.row}>
	          		<Text>row</Text>

          	</View>
		</View>
	}
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  mobileView: {
    backgroundColor: 'white',
    borderWidth: 4,
    borderColor: 'orange',
    flex:1,
    alignSelf: 'stretch',
    // iphone X
    width:1125/3,
    height: 2436/3 
  },

  row: {
  	flexDirection: "row",
  	borderWidth: 1
  },
  col: {
  	flexDirection: "column",
  	borderWidth: 1
  }
});