update style

src/constants/Styles.js

@@ -32,6 +32,7 @@ export const theme = StyleSheet.create({
 		marginLeft: 5,
 		color: color.grey1,
 		marginTop: 30,
+		fontSize: 17
 	},
 	inputErrIcon: {
 		color: color.red1,
@@ -51,5 +52,6 @@ export const theme = StyleSheet.create({
 		alignItems: 'flex-end',
 		borderBottomColor: '#cfd7db',
 		borderBottomWidth: 1,
+		paddingBottom: 5
 	},
 });

src/screens/public/login.js

 import React, { Component } from 'react';
-import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base';
+import { Container, Text, Content, Input, Radio, Item, Left, Right, Button, Row, CheckBox } from 'native-base';
 import { theme } from '../../constants/Styles';
 import { Actions } from 'react-native-router-flux';
 import { LinearGradient } from 'expo-linear-gradient';
+import { Form, Field } from 'react-native-validate-form';
+import InputField from '../../components/layout/InputField'
+
+const required = value => (value ? undefined : 'This is a required field.');
+const minChar = value => (value && !/^.{6,}$/i.test(value) ? 'At least 6 characters' : undefined);
 export default class login extends Component {
 	constructor(props) {
 		super(props);
@@ -10,47 +15,82 @@ export default class login extends Component {
 			isCheck: false,
 		};
 	}
+	submitForm() {
+		let submitResults = this.registerForm.validate();
+
+		let errors = [];
+
+		submitResults.forEach(item => {
+			errors.push({ field: item.fieldName, error: item.error });
+		});
+		this.setState({ errors: errors });
+	}
+
+	submitSuccess() {
+		console.log('Submit Success!');
+		Actions.HomePage();
+	}
+
+	submitFailed() {
+		console.log('Submit Failed!');
+	}
 	render() {
 		return (
 			<Container>
 				<Content style={theme.startContainer}>
 					<Text style={theme.startTitle}>Login</Text>
-					<Form style={theme.startFormContainer}>
-						<Item>
-							<Input
-								placeholder="Username"
-								placeholderTextColor={'#cacaca'}
-								style={{ color: '#808080' }}
-							/>
-						</Item>
-
-						<Item>
-							<Input
-								secureTextEntry={true}
-								placeholder="Password"
-								placeholderTextColor={'#cacaca'}
-								style={{ color: '#808080' }}
-							/>
-						</Item>
+					<Form
+						ref={ref => (this.registerForm = ref)}
+						validate={true}
+						submit={this.submitSuccess.bind(this)}
+						failed={this.submitFailed.bind(this)}
+						errors={this.state.errors}
+						style={theme.startFormContainer}
+					>
+						
+						{/* ---Username--- */}
+						<Field
+							required
+							component={InputField}
+							validations={[required]}
+							name="Username"
+							value={this.state.username}
+							onChangeText={val => this.setState({ username: val })}
+							customStyle={theme.input}
+							placeholder="Username"
+						/>
+						{/* ---password--- */}
+						<Field
+							required
+							component={InputField}
+							validations={[required, minChar]}
+							name="password"
+							value={this.state.password}
+							onChangeText={val => this.setState({ password: val })}
+							customStyle={theme.input}
+							placeholder="Password"
+							isPass={true}
+						/>
+						
 					</Form>
 					<Row style={{ marginTop: 30 }}>
 						<Left>
-							<Row>
-								<Radio
+							<Row style={{alignItems: 'center'}}>
+								<CheckBox
 									color={'#cacaca'}
-									selected={this.state.isCheck}
+									checked={this.state.isCheck}
 									onPress={() =>
 										this.setState(() => {
 											return (this.state.isCheck = !this.state.isCheck);
 										})
 									}
 								/>
-								<Text style={{ color: '#cacaca', marginLeft: 5 }}>Remember me</Text>
+								<Text style={{ color: '#cacaca', marginLeft: 12, fontSize: 13 }}>Remember me</Text>
 							</Row>
 						</Left>
 						<Right>
 							<Text
-								style={{ color: '#cacaca' }}
+								style={{ color: '#cacaca',fontSize: 13, marginRight: 10 }}
 								onPress={() => {
 									Actions.ForgotPass();
 								}}
@@ -68,9 +108,7 @@ export default class login extends Component {
 						<Button
 							full
 							transparent
-							onPress={() => {
-								Actions.HomePage();
-							}}
+							onPress={this.submitForm.bind(this)}
 						>
 							<Text style={{ color: 'white' }}>LOGIN</Text>
 						</Button>

src/screens/public/register.js

@@ -5,6 +5,7 @@ import { Form, Field } from 'react-native-validate-form';
 import InputField from '../../components/layout/InputField';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Actions } from 'react-native-router-flux';
+import { Alert } from 'react-native'
 
 // validations
 const required = value => (value ? undefined : 'This is a required field.');
@@ -43,6 +44,20 @@ export default class register extends Component {
 
 	submitSuccess() {
 		console.log('Submit Success!');
+		Alert.alert(
+			'Completed!',
+			'You have completed your registration',
+			[
+			//   {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
+			//   {
+			// 	text: 'Cancel',
+			// 	onPress: () => console.log('Cancel Pressed'),
+			// 	style: 'cancel',
+			//   },
+			  {text: 'Go to Login', onPress: () => Actions.LoginPage()},
+			],
+			{cancelable: false},
+		  );
 		// Actions.LoginPage();
 	}
 
@@ -142,9 +157,9 @@ export default class register extends Component {
 								})
 							}
 						/>
-						<Text style={{ color: '#9ea0a5', marginLeft: 15 }}>
+						<Text style={{ color: '#9ea0a5', marginLeft: 15, fontSize: 14 }}>
 							I have read the{' '}
-							<Text style={{ textDecorationLine: 'underline', color: '#56575a' }}>
+							<Text style={{ textDecorationLine: 'underline', color: '#56575a', fontSize: 14 }}>
 								Terms and Conditions
 							</Text>
 							.