archive/Sphere
Archived
1
Fork 0
Code Releases Packages Activity

Fix button alignment on bottom

Browse source
This commit is contained in:
Jake Howard 2016-02-02 14:50:42 +00:00
parent c4c306653d
commit 47ffb6658b
1 changed files with 36 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
app/components/routes/login.js
View file

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