ups

App.js

@@ -7,19 +7,14 @@ import CoreSystem from './lib/systems/CoreSystem.js';
 /*********** Custom View Tree ****/
 import { Tree } from './lib/helpers/tree';
 
+import FormComp from './modules/Form';
+
 import  TextComp  from './modules/Text';
-import ViewComp from './modules/View';
 import RootComp from './modules/RootComp';
 import ImageComp from './modules/Image';
 import ButtonComp from './modules/Button';
 
 
-let NodeB = new ViewNode("B","ViewComp", {text: "ASD LOOK AT ME LOOK OO O.O (O.O)"});
-let NodeC = new ViewNode("C","ViewComp",{text:"Manipulationg the dom"});
-let NodeD = new ViewNode("D","ViewComp",{text:"Manipulationg the dom"});
-let NodeE = new ViewNode("E","ViewComp",{text:"Manipulationg the dom"});
-let NodeM = new ViewNode("M","ViewComp",{text:"Manipulationg the dom"});
-let NodeK = new ViewNode("K","ViewComp",{text:"Manipulationg the dom"});
 const CustomStyle = StyleSheet.create({
   container:{
     flex:1,
@@ -42,7 +37,7 @@ const RootStyle = StyleSheet.create({
 let RootNode = new ViewNode("A","RootComp",{text:"This is the   asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdStarting point!!!Try add on me ",style:RootStyle});
 
 let TestNode = new ViewNode("H","Text",{style:CustomStyle,text:"Edited  Text Node Will be here"})
-let EditNode = new ViewNode("N","ViewComp",{text:"Manipulationg the dom sdadwad"});
+
 let ImageNode = new ViewNode("asdasd","Image");
 
 // let Row1 = new RowNode("RootRow");
@@ -177,15 +172,16 @@ export default function App() {
       {React.createElement(ButtonComp)}
          <Text>Open up App.js to start working on your app!</Text>
 
-
+        <Text>here i s</Text>
       {React.createElement(TextComp)}
       <Text>sdadada</Text>
-      {React.createElement(ViewComp)}
       {React.createElement(RootComp)}
       <Div style={{width: 200, height:400}}>
         {React.createElement(ImageComp)}
       </Div>
-
+      <Div style={{width: 200, height:400}}>
+      {React.createElement(FormComp)}
+      </Div>
       <Text>Open up App.js to start working on your app!</Text>
       
       <Div style={{width:500, height:600}}>

dist/modules/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default=["Text","RootComp","Image","Button","View","ViewComp","BaseContainer"].reduce(function(acc,item){acc[item]=require('./'+item)["default"];return acc;},{});exports["default"]=_default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default=["Text","RootComp","Image","Button","Form","ViewComp","BaseContainer"].reduce(function(acc,item){acc[item]=require('./'+item)["default"];return acc;},{});exports["default"]=_default;

modules/Button.js

@@ -18,7 +18,7 @@ export default class ButtonComp extends Module {
 				<View key={Math.random()} style={container || defaultButton.container }>
 					<Button
 					  onPress = {this.props.press || this.press}
-					  title={this.props.title || "Press me"}
+					  title={this.props.title || "Submit"}
 					  color={this.props.color ||  "#03DAC6"}
 					  accessibilityLabel="Learn more about this purple button"
 					/>
@@ -28,7 +28,7 @@ export default class ButtonComp extends Module {
 }
 
 ButtonComp.Inputs = {
-	title: new Types.Text().require().default('Press me'),
+	title: new Types.Text().require().default('Submit'),
 	color: new Types.Text().require().color().default('#03DAC6')
 }
 

modules/Form.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Module from '../lib/Module';
+import {StyleSheet ,TextInput, View, Button } from 'react-native';
+
+import Types from '../lib/Types';
+
+
+
+export default class FormComp extends Module {
+	constructor(props) {
+		super(props);
+		this.state = {
+		}
+		this.submit = this.submit.bind(this)
+	}
+	submit(e){
+		e.preventDefault()
+		return this.state
+	}	
+	display() {
+		let {
+			inputsNum,
+			ButtonText,
+			ButtonColor,
+			container
+		} = this.props
+		if(!inputsNum) inputsNum = 2;
+		let Inputs = [];
+		for(let i = 0; i<inputsNum; i++){
+			let key = i+1;
+			let state = {};
+			let input =  <TextInput key={i}
+				        style={{height: 20, borderColor: 'gray', borderWidth: 1 , marginBottom:5}}
+				        onChangeText={(text) => {
+				        	state[key] = text;
+				        	this.setState(state)}}
+				        value={this.state.key}
+				        placeholder={'placeholder'}
+				      />
+			Inputs.push(input);
+		}
+		let fn = this.props.submit || this.submit
+		return 	(
+				<View style={{backgroundColor:"#f7e6ff",width:250,height:100,padding:10}}>
+					{Inputs}
+			        <Button
+				    onPress = {(e) => fn(e)}
+				    title={this.props.title || "Submit"}
+				    color={this.props.ButtonColor ||  "#008CBA"}
+					accessibilityLabel="Learn more about this purple button"
+					/>
+				</View>)
+	}
+}
+
+
+
+FormComp.Inputs = {
+	inputsNum: new Types.Integer().require().default(2),
+	ButtonText:new Types.Text().require().default('Submit'),
+	ButtonColor: new Types.Text().require().color().default('#008CBA')
+}
+

modules/View.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import Module from '../lib/Module';
-import { View } from 'react-native';
-
-export default class ViewComp extends Module {
-	constructor(props) {
-		super(props);
-	}
-
-	display() {
-		return 	<View>
-					{this.props.children}
-				</View>;
-	}
-}

modules/index.js

@@ -3,7 +3,7 @@ export default [
 	"RootComp",
 	"Image",
 	"Button",
-	"View",
+	"Form",
 	"ViewComp",
 	"BaseContainer"