TrapiLib/modules/Form.js

import React from 'react';
import Module from '../lib/Module';
import {StyleSheet ,TextInput, View, Button , Text } from 'react-native';

import Types from '../lib/Types';
const Inp = [
		{
		textContentType :"username",
		placeholder:"username"
		},
		{
		textContentType :"password",
		placeholder:"password"
		}]


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 {
			inputs, // number of inputs this must be Object
			inputsMargin,
			ButtonText,
			ButtonColor,
			backgroundColor,
			Formtitle
		} = this.props
		
		//Init
		
		if(!inputsMargin) inputsMargin = 7


		let Inputs = Object.keys(inputs).map((key,indx) => {
			let state = {}
			return (<TextInput key={indx}
				        style={[{height: 20, borderColor: 'gray', borderWidth: 1 , marginBottom:inputsMargin},StaticRules.text]}
				        onChangeText={(text) => {
				        state[indx] = text;
				        	this.setState(state)}}
				        value={this.state.key}
				        placeholder={inputs[key].placeholder}
				        textContentType={inputs[key].textContentType}
				        secureTextEntry={ inputs[key].textContentType === "password" ? true :false}
				      />)
		})
		
		let fn = this.props.submit || this.submit
		return 	(
				<View style={[{backgroundColor:backgroundColor},StaticRules.container]}>
					{this.props.Formtitle ? (
						<Text>{this.props.Formtitle}</Text>
						):(null)}	


					{Inputs}
			        <Button
				    onPress = {(e) => fn(e)}
				    title={this.props.ButtonText }
				    color={this.props.ButtonColor}
					accessibilityLabel="Learn more about this purple button"
					/>
				</View>)
	}
}
//Predefined Rules that the User cant change
let StaticRules = StyleSheet.create({
	container:{
		padding:10
	},
	text:{
		fontSize:7
	}
})

FormComp.Inputs = {
	//inputsNum: new Types.Integer().require().default(2),
	/*inputs:[
		{
		textContentType :"username",
		placeholder:"username"
		},
		{
		textContentType :"password",
		placeholder:"password"
		},
	],*/
	inputs:new Types.Object().require().default(Inp),
	ButtonText:new Types.Text().require().default('Submit'),
	ButtonColor: new Types.Text().require().color().default('rgba(3, 218, 198, 1)'),
	backgroundColor: new Types.Text().require().color().default('rgba(0, 140, 186, 1)'),
	Formtitle: new Types.Text().require()
}

/*
inputs, // number of inputs this must be Object
			inputsMargin,
			ButtonText,
			ButtonColor,
			backgroundColor,
			Formtitle

*/