Fix button alignment on bottom

This commit is contained in:
Jake Howard 2016-02-02 14:50:42 +00:00
parent c4c306653d
commit 47ffb6658b

View file

@ -13,29 +13,37 @@ const {
const styles = StyleSheet.create({
container: {
flex: .5,
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
backgroundColor: '#F5FCFF',
},
contentWrapper: {
flex: 0.85,
justifyContent: 'center',
alignItems: 'center'
},
input: {
marginHorizontal: 10,
height: 50,
width: 300,
borderColor: 'gray',
borderWidth: 1
borderWidth: 1,
textAlign: 'center'
},
loginButton: {
flex: 1,
backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
margin: 10,
justifyContent: 'center',
alignItems: 'center',
padding: 10
},
loginButtonText: {
fontSize: 16,
color: 'white',
},
buttonContainer: {
flexDirection: 'row',
height: 80,
justifyContent: 'center',
padding: 10
},
title: {
fontSize: 25,
margin: 13
@ -67,25 +75,31 @@ export default class Login extends React.Component {
render() {
return (
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.container}>
<Text style={styles.title}>
Login to continue
</Text>
<TextInput
style={styles.input}
onChangeText={(password) => this.updateState('password', password)}
value={this.state.password}
onSubmitEditing={this.validate}
placeholder="Password"
/>
<TouchableHighlight style={styles.loginButton} onPress={this.validate}>
<View style={styles.container}>
<ScrollView keyboardShouldPersistTaps={false} contentContainerStyle={styles.container}>
<View style={styles.contentWrapper}>
<Text style={styles.title}>
Login to continue
</Text>
<TextInput
style={styles.input}
onChangeText={(password) => this.updateState('password', password)}
value={this.state.password}
onSubmitEditing={this.validate}
placeholder="Password"
autoCorrect={true}
/>
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<TouchableHighlight style={styles.loginButton} onPress={this.validate}>
<Text style={styles.loginButtonText}>
Authenticate
</Text>
</TouchableHighlight>
</View>
</ScrollView>
</View>
);
}
};