1+ import React , { Component } from "react" ;
2+ import {
3+ Alert ,
4+ View ,
5+ StyleSheet ,
6+ Text ,
7+ ScrollView ,
8+ TouchableOpacity
9+ } from "react-native" ;
10+ import TextField from "./TextField.js" ;
11+ import Robot from './assets/images/GiantRobotLTD_Logo.svg' ;
12+ import Arrow from './assets/images/White_Arrow.svg' ;
13+
14+ export default class App extends Component {
15+ constructor ( props ) {
16+ super ( props ) ;
17+ this . state = {
18+ firstName :'' ,
19+ lastName :'' ,
20+ addressOne :'' ,
21+ addressTwo :'' ,
22+ validate :true
23+ } ;
24+ }
25+
26+ handleChange ( name ) {
27+ return ( text ) => {
28+ this . setState ( { [ name ] :text } )
29+ }
30+ }
31+
32+ check = ( ) => {
33+ let { firstName, lastName, addressOne, addressTwo} = this . state ;
34+ this . setState ( {
35+ validate :false
36+ } )
37+ if ( firstName . length > 0 && lastName . length > 0 && addressOne . length > 0 ) {
38+ Alert . alert (
39+ 'HI!' ,
40+ `Welcome ${ firstName } ${ lastName } ${ addressOne } ${ addressTwo } ,
41+ { text : 'OK' , onPress : ( ) => console . log ( 'OK Pressed' ) } ,
42+ { cancelable : false } ,
43+ ) ;
44+ }
45+ }
46+
47+ validate = ( param ) => {
48+ if ( ! this . state . validate ) {
49+ return param !== '' ? false : true ;
50+ }
51+ }
52+
53+ render ( ) {
54+ let { firstName, lastName, addressOne, addressTwo} = this . state ;
55+ return (
56+ < View style = { styles . container } >
57+ < ScrollView >
58+
59+ < View style = { styles . headContainer } >
60+ < View style = { styles . headSvgWrapper } >
61+ < Robot width = { 177 } height = { 26 } />
62+ </ View >
63+ < Text style = { styles . headTextWelcome } > Welcome</ Text >
64+ < Text style = { styles . headText } > Please tell us a little about yourself to get started.</ Text >
65+ </ View >
66+
67+ < View style = { styles . inputContainer } >
68+ < TextField
69+ title = { 'FIRST NAME' }
70+ value = { firstName }
71+ onTextChange = { this . handleChange ( 'firstName' ) }
72+ isRequired = { this . validate ( firstName ) } />
73+ < TextField
74+ title = { 'LAST NAME' }
75+ value = { lastName }
76+ onTextChange = { this . handleChange ( 'lastName' ) }
77+ isRequired = { this . validate ( lastName ) } />
78+ < TextField
79+ title = { 'ADDRESS' }
80+ value = { addressOne }
81+ onTextChange = { this . handleChange ( 'addressOne' ) }
82+ isRequired = { this . validate ( addressOne ) } />
83+ < TextField
84+ title = { 'ADDRESS 2 (OPTIONAL)' }
85+ value = { addressTwo }
86+ onTextChange = { this . handleChange ( 'addressTwo' ) }
87+ />
88+ </ View >
89+ </ ScrollView >
90+
91+ < View style = { styles . button } >
92+ < TouchableOpacity style = { styles . buttonWrapper } onPress = { this . check } >
93+ < Text style = { styles . buttonText } > NEXT</ Text >
94+ < Arrow />
95+ </ TouchableOpacity >
96+ </ View >
97+ </ View >
98+ ) ;
99+ }
100+ }
101+
102+ const styles = StyleSheet . create ( {
103+ container : {
104+ flex : 1
105+ } ,
106+ headContainer : {
107+ paddingTop : 32 ,
108+ paddingBottom : 32 ,
109+ marginBottom :32 ,
110+ paddingHorizontal :10 ,
111+ backgroundColor : "#585858"
112+ } ,
113+ headSvgWrapper : {
114+ paddingVertical :32 ,
115+ } ,
116+ headTextWelcome :{
117+ fontFamily : "Roboto-Bold" ,
118+ color : "#FFFFFF" ,
119+ paddingBottom :20 ,
120+ fontSize :24
121+ } ,
122+ headText : {
123+ fontFamily : "Merriweather-Regular" ,
124+ color : "#EAEAEA" ,
125+ fontSize :14
126+ } ,
127+ inputContainer :{
128+ padding : 10
129+ } ,
130+ inputTitleWrapper :{
131+ display : 'flex'
132+ } ,
133+ inputTitle : {
134+ paddingBottom :5
135+ } ,
136+ input : {
137+ borderWidth : 1 ,
138+ borderColor : "black" ,
139+ padding : 12 ,
140+ borderRadius :6 ,
141+ fontSize :14 ,
142+ marginBottom : 15 ,
143+ alignSelf : "stretch"
144+ } ,
145+ button : {
146+ marginHorizontal :20 ,
147+ marginBottom : 20
148+ } ,
149+ buttonWrapper :{
150+ backgroundColor : "#FFAB44" ,
151+ justifyContent :'center' ,
152+ flexDirection :"row" ,
153+ alignItems :'center' ,
154+ paddingVertical :15 ,
155+ borderRadius :6
156+ } ,
157+ buttonText :{
158+ color : "#FFFFFF" ,
159+ fontFamily :'Roboto-Bold' ,
160+ fontSize : 16 ,
161+ paddingRight :8
162+ }
163+ } ) ;
0 commit comments