import React, { Component } from 'react'; import { AppRegistry, Text, Image, View, Button, StyleSheet, TextInput, Linking, Alert, Navigator } from 'react-native'; import t from 'tcomb-form-native'; const Form = t.form.Form; const Email = t.subtype(t.Str, (email) => { const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); }); const LoginFields = t.struct({ username: Email, password: t.String, }); const options = { fields: { password: { type: 'password', placeholder: 'Password', }, username: { placeholder: 'e.g: abc@gmail.com', error: 'Insert a valid email' } } }; export default class Login extends Component { _onSubmit() { const value = this.refs.form.getValue(); if (value) { console.log(value.password); console.log(value.username); } } render() { return ( <View style={styles.containerView}> <Form ref="form" type={LoginFields} options={options} /> <Text style={{color: 'blue', marginBottom: 10}} onPress={() => Linking.openURL('https://www.google.co.in')}> Forgot Password? </Text> <Button onPress={this._onSubmit.bind(this)} title="Login" style={styles.loginButton} accessibilityLabel="Ok, Great!" /> </View> ); } }; const styles= StyleSheet.create({ containerView: { flex: 1, justifyContent: 'center', backgroundColor: '#ffebcd', borderStyle: 'solid', borderColor: '#000000' }, loginText: { fontSize: 20, marginBottom: 10 }, inputFields: { fontSize: 20, borderStyle: 'solid', borderColor: '#000000', borderRadius: 30, marginBottom: 10 }, loginButton: { backgroundColor: '#34A853' } });