Guest User

Untitled

a guest
Jun 15th, 2017
68
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