SHARE
TWEET

Untitled

a guest Jun 15th, 2017 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { Text, Image, StyleSheet, View, TextInput, TouchableHighlight } from 'react-native';
  3.  
  4. import TextField from 'react-native-md-textinput';
  5.  
  6. const styles = StyleSheet.create({
  7.     container: {
  8.         alignItems: 'center',
  9.         flex: 1,
  10.         resizeMode: 'cover',
  11.         width: null,
  12.         height: null,
  13.     },
  14.     logo: {
  15.         marginTop: 70,
  16.         width: 150,
  17.         height: 150,
  18.         resizeMode: 'contain'
  19.     },
  20.     label: {
  21.         marginBottom: -10,
  22.         alignItems: 'flex-start',
  23.         fontSize: 20,
  24.         fontWeight: '300',
  25.         color: 'rgb(94, 109, 155)'
  26.     },
  27.     inputWrap: {
  28.         position: 'absolute',
  29.         marginTop: 240
  30.     },
  31.     input: {
  32.         borderBottomColor: '#305596',
  33.         borderBottomWidth: 1,
  34.         width: 320,
  35.         fontSize: 20,
  36.         fontWeight: '500',
  37.         color: 'grey',
  38.     },
  39.     btn: {
  40.         marginTop: 25,
  41.         backgroundColor: '#FFF',
  42.         borderRadius: 50,
  43.         borderWidth: 2,
  44.         width: 320,
  45.         borderColor: '#FFF'
  46.     },
  47.     txt: {
  48.         fontSize: 20,
  49.         fontWeight: '500',
  50.         textAlign: 'center',
  51.         flexDirection: 'column',
  52.         padding: 10,
  53.         color: 'rgb(94, 109, 155)'
  54.     },
  55. })
  56.  
  57. class Register extends Component {
  58.  
  59.     constructor(props) {
  60.         super(props);
  61.  
  62.         this.state = {
  63.             username: "",
  64.             email: "",
  65.             password: "",
  66.             confirm: ""
  67.         }
  68.     }
  69.  
  70.     static navigationOptions = {
  71.         title: 'Register',
  72.         header: null,
  73.         tabBarVisible: false
  74.     }
  75.  
  76.     render() {
  77.         return <Image source={require('../images/bg-crem.jpg')} style={styles.container}>
  78.             <Image source={require('../images/logo-crem.png')} style={styles.logo}></Image>
  79.             <View style={styles.inputWrap}>
  80.                 <Text style={styles.label} >Username</Text>
  81.                 <TextInput
  82.                     style={styles.input}
  83.                     underlineColorAndroid={'transparent'}
  84.                     keyboardType={'default'}
  85.                     onChangeText={username => this.setState(() => ({ username }))}
  86.                     value={this.state.username}
  87.                 />
  88.                 <Text style={styles.label} >Email</Text>
  89.                 <TextInput
  90.                     style={styles.input}
  91.                     underlineColorAndroid={'transparent'}
  92.                     keyboardType={'email-address'}
  93.                     onChangeText={email => this.setState(() => ({ email }))}
  94.                     value={this.state.email}
  95.                 />
  96.                 <Text style={[styles.label, { marginTop: 15 }]} >Password</Text>
  97.                 <TextInput
  98.                     style={styles.input}
  99.                     underlineColorAndroid={'transparent'}
  100.                     onChangeText={password => this.setState(() => ({ password }))}
  101.                     secureTextEntry={true}
  102.                     value={this.state.password}
  103.                 />
  104.                 <Text style={[styles.label, { marginTop: 15 }]} >Password</Text>
  105.                 <TextInput
  106.                     style={styles.input}
  107.                     underlineColorAndroid={'transparent'}
  108.                     onChangeText={confirm => this.setState(() => ({ confirm }))}
  109.                     secureTextEntry={true}
  110.                     value={this.state.confirm}
  111.                 />
  112.                 <TouchableHighlight onPress={() => this.props.navigation.navigate('Dashboard')} style={styles.btn} underlayColor={'rgba(244, 236, 233, 0.8)'} >
  113.                     <Text style={styles.txt} >SIGN UP</Text>
  114.                 </TouchableHighlight>
  115.             </View>
  116.         </Image>
  117.     }
  118. }
  119.  
  120. export default Register;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top