Last active
January 14, 2019 11:29
-
-
Save youneshenniwrites/0aa11194c9dea8d5c9bc10ed9bb39607 to your computer and use it in GitHub Desktop.
layout of the forget password in RNAuthAWS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class ForgetPasswordScreen extends React.Component { | |
// ...same code above | |
render() { | |
return ( | |
<SafeAreaView style={styles.container}> | |
<StatusBar/> | |
<KeyboardAvoidingView | |
style={styles.container} | |
behavior='padding' | |
enabled | |
keyboardVerticalOffset={23}> | |
<TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}> | |
<View style={styles.container}> | |
{/* Infos */} | |
<Container style={styles.infoContainer}> | |
<View style={styles.container}> | |
{/* Username */} | |
<Item rounded style={styles.itemStyle}> | |
<Icon | |
active | |
name='person' | |
style={styles.iconStyle} | |
/> | |
<Input | |
style={styles.input} | |
placeholder='Username' | |
placeholderTextColor='#adb4bc' | |
keyboardType={'email-address'} | |
returnKeyType='go' | |
autoCapitalize='none' | |
autoCorrect={false} | |
onChangeText={value => this.onChangeText('username', value)} | |
/> | |
</Item> | |
<TouchableOpacity | |
style={styles.buttonStyle}> | |
<Text style={styles.buttonText}> | |
Send Code | |
</Text> | |
</TouchableOpacity> | |
{/* the New password section */} | |
<Item rounded style={styles.itemStyle}> | |
<Icon | |
active | |
name='lock' | |
style={styles.iconStyle} | |
/> | |
<Input | |
style={styles.input} | |
placeholder='New password' | |
placeholderTextColor='#adb4bc' | |
returnKeyType='next' | |
autoCapitalize='none' | |
autoCorrect={false} | |
secureTextEntry={true} | |
onSubmitEditing={(event) => { this.refs.SecondInput._root.focus()}} | |
onChangeText={value => this.onChangeText('newPassword', value)} | |
/> | |
</Item> | |
{/* Code confirmation section */} | |
<Item rounded style={styles.itemStyle}> | |
<Icon | |
active | |
name='md-apps' | |
style={styles.iconStyle} | |
/> | |
<Input | |
style={styles.input} | |
placeholder='Confirmation code' | |
placeholderTextColor='#adb4bc' | |
keyboardType={'numeric'} | |
returnKeyType='done' | |
autoCapitalize='none' | |
autoCorrect={false} | |
secureTextEntry={false} | |
ref='SecondInput' | |
onChangeText={value => this.onChangeText('authCode', value)} | |
/> | |
</Item> | |
<TouchableOpacity | |
style={styles.buttonStyle}> | |
<Text style={styles.buttonText}> | |
Confirm the new password | |
</Text> | |
</TouchableOpacity> | |
</View> | |
</Container> | |
</View> | |
</TouchableWithoutFeedback> | |
</KeyboardAvoidingView> | |
</SafeAreaView> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment