ups

App.js

@@ -12,8 +12,10 @@ import FormComp from './modules/Form';
 import  TextComp  from './modules/Text';
 import RootComp from './modules/RootComp';
 import ImageComp from './modules/Image';
-import ButtonComp from './modules/Button';
 
+import Module from './modules';
+console.log("@@@@@@@@@@@@@@")
+console.log(Module)
 
 const CustomStyle = StyleSheet.create({
   container:{
@@ -169,7 +171,7 @@ export default function App() {
        <Text>Open up App.js to start working on your app!</Text>
         <Text>Open up App.js to start working on your app!</Text>
 
-      {React.createElement(ButtonComp)}
+      
          <Text>Open up App.js to start working on your app!</Text>
 
         <Text>here i s</Text>
@@ -177,7 +179,7 @@ export default function App() {
       <Text>sdadada</Text>
       {React.createElement(RootComp)}
       <Div style={{width: 200, height:400}}>
-        {React.createElement(ImageComp)}
+        {CS.ModuleSystem.createElementCtor(Module.Button)}
       </Div>
       <Div style={{width: 200, height:400}}>
       {CS.ModuleSystem.createElementCtor(FormComp)}

dist/lib/systems/StyleSystem.js

@@ -0,0 +1 @@
+"use strict";

dist/modules/Button/styles/default.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _default={textColor:'white',width:'100',height:'50',borderRadius:14,FontSize:14,backgroundColor:'red'};exports["default"]=_default;

dist/modules/Button/styles/index.js

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

modules/Button.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import Module from '../lib/Module';
-import { View, Button , StyleSheet} from 'react-native';
-import Types from '../lib/Types';
-export default class ButtonComp extends Module {
-	constructor(props) {
-		super(props);
-	}
-
-	press(){
-		console.log("######You must over write this function@@@@@")
-	}
-
-
-	display() {
-		let { container ,  color } = this.props.style || '';
-		return 	(
-				<View key={Math.random()} style={container || defaultButton.container }>
-					<Button
-					  onPress = {this.props.press || this.press}
-					  title={this.props.title}
-					  color={this.props.color}
-					  accessibilityLabel="Learn more about this purple button"
-					/>
-				</View>)
-	}	
-	
-}
-
-ButtonComp.Inputs = {
-	title: new Types.Text().require().default('Submit'),
-	color: new Types.Text().require().color().default('rgba(3, 218, 198, 1)')
-}
-
-
-const defaultButton = StyleSheet.create({
-	container:{
-
-	},
-
-})

modules/Button/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Module from '../../lib/Module';
+import { View , StyleSheet , Text} from 'react-native';
+import Types from '../../lib/Types';
+import {Button} from 'react-native-elements'
+import Styles from './styles';
+
+console.log("WHATTTTTTTTTTTTTTTTT")
+console.log(Styles)
+
+export default class ButtonComp extends Module {
+	constructor(props) {
+		super(props);
+	}
+	press(){
+		console.log("######You must over write this function@@@@@")
+	}
+	display() {
+		let {
+			title,
+			textColor,
+			width,
+			height,
+			borderRadius,
+			FontSize,
+			backgroundColor
+		} = this.props;
+		return 	(
+				<Button 
+				  onPress = {this.props.press || this.press}
+				  title={title || "submit"}
+				  accessibilityLabel="Learn more about this purple button"
+				  titleStyle = {{color:textColor,fontSize:FontSize}}
+				  buttonStyle = {{backgroundColor:backgroundColor,width:width,height:height,borderRadius:borderRadius}}
+				/>
+			)
+	}	
+	
+}
+
+ButtonComp.Inputs = {
+	title: new Types.Text().require().default('Submit'),
+	textColor: new Types.Text().require().color().default('black'),
+	backgroundColor: new Types.Text().require().color().default('rgba(47, 150, 145, 1)'),
+	borderRadius: new Types.Integer().require(),
+	FontSize: new Types.Integer().require(),
+	width: new Types.Integer().require(),
+	height: new Types.Integer().require()
+}
+
+
+ButtonComp.Styles = Styles;

modules/Button/styles/default.js

@@ -0,0 +1,8 @@
+export default {
+	textColor:'white',
+	width:'100',
+	height:'50',
+	borderRadius:14,
+	FontSize:14,
+	backgroundColor:'red'
+}

modules/Button/styles/index.js

@@ -0,0 +1,6 @@
+export default [
+	"default"
+].reduce((acc,item)=> {
+	acc[item] =  require('./' + item).default;
+	return acc;	
+},{});

modules/Form.js

@@ -70,6 +70,7 @@ export default class FormComp extends Module {
 				    color={this.props.ButtonColor}
 					accessibilityLabel="Learn more about this purple button"
 					/>
+				
 				</View>)
 	}
 }

package-lock.json

@@ -2152,6 +2152,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
+      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2165,6 +2174,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "color-string": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -2394,6 +2412,11 @@
         "is-obj": "^1.0.0"
       }
     },
+    "deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -3665,6 +3688,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -4965,6 +4996,11 @@
         "mimic-fn": "^1.0.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
+    },
     "opn": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/opn/-/opn-3.0.3.tgz",
@@ -5568,6 +5604,34 @@
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-3.0.1.tgz",
       "integrity": "sha512-vbcYxPZlpF5f39GAEUF8kuGQqCNeD3E6zEdvtOq8oCGZunHXlWlKgAS6dgBKCvsHvXgHuMtpvs39VgOp8DaKig=="
     },
+    "react-native-elements": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-1.1.0.tgz",
+      "integrity": "sha512-n1eOL0kUdlH01zX7bn1p7qhYXn7kquqxYQ0oWlxoAck9t5Db/KeK5ViOsAk8seYSvAG6Pe7OxgzRFnMfFhng0Q==",
+      "requires": {
+        "color": "^3.1.0",
+        "deepmerge": "^3.1.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "opencollective-postinstall": "^2.0.0",
+        "prop-types": "^15.5.8",
+        "react-native-ratings": "^6.3.0",
+        "react-native-status-bar-height": "^2.2.0"
+      }
+    },
+    "react-native-ratings": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.4.0.tgz",
+      "integrity": "sha512-QvRJiEzjXZa7OL1MhJzbc50yUaOzPgjU6vGpkfIpWvgOyrjjkoQQqQ7EFvkoQMSEoRLD33eKTT3huJolScFoHQ==",
+      "requires": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.10"
+      }
+    },
+    "react-native-status-bar-height": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.4.0.tgz",
+      "integrity": "sha512-pWvZFlyIHiuxLugLioq97vXiaGSovFXEyxt76wQtbq0gxv4dGXMPqYow46UmpwOgeJpBhqL1E0EKxnfJRrFz5w=="
+    },
     "react-native-view-shot": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz",
@@ -6636,6 +6700,21 @@
         "plist": "^3.0.1"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "slash": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-elements": "^1.1.0",
     "react-native-web": "^0.11.5"
   },
   "devDependencies": {