SHARE
TWEET

Untitled

a guest Oct 22nd, 2017 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. render: function() {
  2.     if(this.state.register) {
  3.       return this.renderRegisterScreen();
  4.     }
  5.     else if (this.state.loggedIn) {
  6.       return this.userLoggedIn();
  7.     }
  8.     else {
  9.       return this.renderLoginScreen();
  10.     }
  11.   }
  12.    
  13. var React = require('react-native');
  14. var {
  15.   AppRegistry,
  16.   StyleSheet,
  17.   Text,
  18.   View,
  19.   Image,
  20.   TouchableHighlight,
  21.   TextInput,
  22. } = React;
  23.  
  24. var Register = React.createClass({
  25.         render: function() {
  26.         return (
  27.           <View style={styles.container}>
  28.             <View style={styles.rafitoImage}>
  29.               <Image source={require('./logo.png')}></Image>
  30.               <Text style={styles.slogan}>Eliminate the need to wait!</Text>
  31.             </View>
  32.             <View style={styles.bottomSection}>
  33.               <View style={styles.username}>
  34.                 <View style={styles.inputBorder}>
  35.                   <TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) => this.setState({username: text})}/>
  36.                 </View>
  37.                 <View style={styles.inputBorder}>
  38.                   <TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({password: text})}/>
  39.                 </View>
  40.                 <View style={styles.inputBorder}>
  41.                   <TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) => this.setState({verifyPassword: text})}/>
  42.                 </View>
  43.                 <View style={styles.inputBorder}>
  44.                   <TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) => this.setState({phone: text})}/>
  45.                 </View>
  46.                 <View style={styles.inputBorder}>
  47.                   <TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) => this.setState({email: text})}/>
  48.                 </View>
  49.                 <TouchableHighlight style={styles.button}
  50.                   underlayColor='#f1c40f' onPress={this.register}>
  51.                         <Text style={styles.buttonText}>Register</Text>
  52.                 </TouchableHighlight>
  53.                 <TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
  54.                 underlayColor='#ffffff'>
  55.                 <Text style={styles.signUpText}>Already A Member </Text>
  56.                 </TouchableHighlight>
  57.               </View>
  58.             </View>
  59.             <View style={styles.copyright}>
  60.             </View>
  61.           </View>
  62.         );
  63.     },
  64.  
  65.     resetToLogin: function() {
  66.         this.setState({
  67.             register: false //I want this to re render the home screen with the variable register as false
  68.         });
  69.     }
  70. });
  71.  
  72.     var styles = StyleSheet.create({
  73.       container: {
  74.         flex : 1
  75.       },
  76.       bottomSection: {
  77.         flex: 5,
  78.         flexDirection: 'row'
  79.       },
  80.       button: {
  81.             height: 36,
  82.             backgroundColor: '#32c5d2',
  83.             justifyContent: 'center',
  84.             marginTop: 20
  85.         },
  86.       buttonText: {
  87.             fontSize: 18,
  88.             color: 'white',
  89.             alignSelf: 'center'
  90.       },
  91.       signUpText: {
  92.         color: '#3598dc'
  93.       },
  94.       signUp: {
  95.         alignItems: 'flex-end',
  96.         marginTop: 10,
  97.       },
  98.       username: {
  99.         flex: 1,
  100.         padding: 5
  101.       },
  102.       rafitoImage: {
  103.         flex: 3,
  104.         justifyContent: 'center',
  105.         alignItems: 'center',
  106.       },
  107.       copyright: {
  108.         alignItems: 'center'
  109.       },
  110.       usernameInput: {
  111.             height: 36,
  112.             marginTop: 10,
  113.             marginBottom: 10,
  114.             fontSize: 18,
  115.             padding: 5
  116.       },
  117.       copyrightText: {
  118.         color: '#cccccc',
  119.         fontSize: 12
  120.       },
  121.       inputBorder: {
  122.         borderBottomWidth: 1,
  123.         borderBottomColor: '#ececec'
  124.       },
  125.       slogan: {
  126.         color: '#3598dc'
  127.       }
  128.     });
  129.  
  130. module.exports = Register;
  131.    
  132. renderRegisterScreen: function() {
  133.     return (
  134.       <Register login={this.login}/>
  135.     )
  136.   }
  137.    
  138. <TouchableHighlight style={styles.signUp} onPress={this.props.login}
  139.                 underlayColor='#ffffff'>
  140.                 <Text style={styles.signUpText}>Already A Member </Text>
  141.                 </TouchableHighlight>
  142.    
  143. var Parent = React.createClass({
  144.  
  145.     getInitialState() {
  146.         return {
  147.             registered: false
  148.         }
  149.     },
  150.  
  151.   register(){
  152.     console.log("logging in... ");
  153.     this.setState({
  154.         registered: true
  155.     });
  156.  
  157.   },
  158.  
  159.   render: function() {
  160.     return (
  161.       <View style={styles.container}>
  162.         <Child register={this.register.bind(this)} registered={this.state.registered} />
  163.       {this.state.registered && <View style={{padding:10, backgroundColor:'white', marginTop:10}}>
  164.                                     <Text style={{fontSize:20}}>Congratulations, you are now registered!</Text>
  165.                               </View>}
  166.        </View>
  167.     );
  168.   }
  169. });
  170.    
  171. var Child = React.createClass({
  172.  
  173. render: function() {
  174. return(
  175.     <View style={{backgroundColor: 'red', paddingBottom:20, paddingTop:20 }}>
  176.         <TouchableHighlight style={{padding:20, color: 'white', backgroundColor: 'black'}} onPress={() => this.props.register() }>
  177.  {this.props.registered ? <Text style={{color: 'white'}}>registered</Text> : <Text style={{color: 'white'}}>register</Text>}
  178.         </TouchableHighlight>                    
  179.     </View>
  180.     )
  181.   }
  182. })
  183.    
  184. onPress={this.props.login}
  185.    
  186. onPress={()=>this.props.login}
  187.    
  188. render: function() {
  189.     return (
  190.        ...
  191.         <Child changeParentState={newState=>this.setstate(newState)} />
  192.        ...
  193.     );
  194. }
  195.    
  196. this.props.changeParentState({registered: true})
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