Ups

lib/Module.js

@@ -20,8 +20,8 @@ export default class Module extends React.Component{
 		this.isTemplate = false
 		//console.log("GEN EV: " , eventName, EventSystem);
 		this._containerStyle = {
-			marginLeft: 12,
-			marginRight: 12,
+			marginLeft: 24,
+			marginRight: 24
 		}
 	}
 	
@@ -37,7 +37,7 @@ export default class Module extends React.Component{
 		throw new Error("You must extend this base Module and override display method!");
 	}
 	render() { 
-		return <View ModuleID={this.props.ModuleID} style={[{overflow:'hidden'},this._containerStyle]} MY_WRAPPER_FROM_BASE_MODULE={true}>
+		return <View ModuleID={this.props.ModuleID} style={[{overflow:'hidden'}]} MY_WRAPPER_FROM_BASE_MODULE={true}>
 			{this.display()}
 		</View>
 		// throw new Error("You must extend this base Module and override render method!");

modules/BaseHolder/index.js

@@ -25,8 +25,14 @@ export default class BaseHolder extends React.Component {
 			flexShrink,
 			flexBasis,
 
+
 			width,
 			height,
+			paddingTop,
+			paddingBottom,
+			marginLeft,
+			marginRight,
+
 			overflow,
 			CoreSystem,
 			stretchContainer,
@@ -47,6 +53,10 @@ export default class BaseHolder extends React.Component {
 				flexBasis,
 				width,
 				height,
+				paddingTop,
+				paddingBottom,
+				marginLeft,
+				marginRight,
 				overflow
 			}]}>
 	    		{content}
@@ -108,6 +118,10 @@ const styles = StyleSheet.create({
 BaseHolder.Inputs = {
 	width: new Types.Integer(),
 	height: new Types.Integer(),
+	paddingTop: new Types.Integer(),
+	paddingBottom: new Types.Integer(),
+	marginLeft: new Types.Integer().default(0),
+	marginRight: new Types.Integer().default(0),
 	stretchContainer: new Types.Bool().default(false),
 	overflow: new Types.Text().default('visible'),
 	justifyContent: new Types.Text().default("flex-start"),

modules/BlogPost/index.js

@@ -52,28 +52,28 @@ export default class BlogPost extends Module {
 		 	let IconContainer = this.NodeFactory({justifyContent:'flex-end', height: 48, width: 58},'BaseContainer',{});
 
 
-			let base1 = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer",  {width:375,height:209}))
-			let base2 = new Node("SS"+ this.nextNumber.next().value, {flex: 1},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer",  {width:375,height:209}))
+			let base1 = new Node("SS"+ this.nextNumber.next().value, {})
+			let base2 = new Node("SS"+ this.nextNumber.next().value, {flex: 1})
 			let Image1 = new Node("SS"+ this.nextNumber.next().value, {alignItems:'flex-start'},new ViewNode("S"+this.nextNumber.next().value, "Image"))
 			
-			let wrapper = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"row",justifyContent:"space-between",alignItems:"flex-end",height:40},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer", {}))
+			let wrapper = new Node("SS"+ this.nextNumber.next().value, { marginLeft:24, marginRight:24,flexDirection:"row",justifyContent:"space-between",alignItems:"flex-end", paddingBottom: 4, paddingTop: 24})
 			let Title = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"This is the post Title",color:"rgba(112, 112, 112, 1)",fontSize:24,fontFamily:"roboto-regular"}))
 		 	let BookMark = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Icon", {}))
 
-		 	let subtitle = new Node("SS"+ this.nextNumber.next().value, {height:25},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"This is the subtitle",color:"rgba(193,193,193,1)", fontSize:14,fontFamily:"roboto-medium"}))
-		 	let MainText = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:defaultText, color:"rgba(112, 112, 112, 1)", fontSize:14, fontFamily: 'roboto-regular'}))
+		 	let subtitle = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"This is the subtitle",color:"rgba(193,193,193,1)", fontSize:14,fontFamily:"roboto-medium"}))
+		 	let MainText = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:defaultText, color:"rgba(112, 112, 112, 1)", fontSize:14, fontFamily: 'roboto-regular'}))
 		 	
 
 
-		 	let wrapperProfile = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"row", height:40},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer", {}))
+		 	let wrapperProfile = new Node("SS"+ this.nextNumber.next().value, {marginLeft:24, marginRight:24, flexDirection:"row", paddingTop:24, paddingBottom: 24})
 			
-		 	let ImageWrapper = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"row",justifyContent:"flex-end", width: 44,height:40},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer", {}))
-		 	let ImageProfile = new Node("SS"+ this.nextNumber.next().value, {width:36,height:36},new ViewNode("S"+this.nextNumber.next().value, "Image",{source:require('../Image/assets/profile.png'),width:32,height:32}))
+		 	let ImageWrapper = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"row",justifyContent:"flex-end"}, new ViewNode("S"+this.nextNumber.next().value, "BaseContainer",  {width:34}))
+		 	let ImageProfile = new Node("SS"+ this.nextNumber.next().value, {},new ViewNode("S"+this.nextNumber.next().value, "Image",{source:require('../Image/assets/profile.png'),width:32,height:32}))
 			
-		 	let UserWrapper = new Node("SS"+ this.nextNumber.next().value, {flexDirection:"column",height:40,flexGrow:1},new ViewNode("S"+this.nextNumber.next().value, "BaseContainer", {}))
+		 	let UserWrapper = new Node("SS"+ this.nextNumber.next().value, {marginLeft:4,flexDirection:"column",height:40,flexGrow:1})
 			
 		 	let user = new Node("SS"+ this.nextNumber.next().value, {height:20},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"Alexandra papadopoulou ",color:"rgba(112, 112, 112, 1)",fontSize:12,fontFamily:"roboto-regular"}))
-		 	let userjob = new Node("SS"+ this.nextNumber.next().value, {height:20},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"Market Analyst ",color:"rgba(112, 112, 112, 1)",fontSize:10,fontFamily:"roboto-light"}))
+		 	let userjob = new Node("SS"+ this.nextNumber.next().value, {height:20},new ViewNode("S"+this.nextNumber.next().value, "Text", {text:"MARKET ANALYST",color:"rgba(112, 112, 112, 1)",fontSize:10,fontFamily:"roboto-light", letterSpacing: 1.5}))
 		 	
 
 		 // 	if(!CurrentView.has(NavContainer)) CurrentView.addViewNode(NavContainer,node);

modules/Text/index.js

@@ -20,11 +20,13 @@ export default class TextComp extends Module {
 			color,
 			fontSize,
 			fontFamily,
+			lineHeight,
+			letterSpacing,
 			textAlign
 		} = this.props;
 		return 	(
 				<View>
-					<Text style={{color, fontSize,fontFamily,textAlign}}>
+					<Text style={{color, fontSize,fontFamily,textAlign, lineHeight, letterSpacing}}>
 						{text}
 					</Text>
 					{this.props.children}
@@ -38,5 +40,7 @@ TextComp.Inputs = {
 	color: new Types.Text().require().color().default('rgba(112, 112, 112, 1)'),
 	fontSize: new Types.Integer().default(22),
 	fontFamily: new Types.Text(),
+	lineHeight: new Types.Real(),
+	letterSpacing: new Types.Real(),
 	textAlign: new Types.Text()
 }