I'm currently working on developing a straightforward login page in react native and I've encountered some difficulties with styling. Does anyone have tips on how to center the text on the button?
Also, is there a way to move the INSTARIDE text higher up and create more space between it and the username field? Any suggestions or code examples that could be tested on Expo Snack would be greatly appreciated.
import React, { Component } from 'react';
import { Alert, Button, Text, Container, Header, Content, TextInput, Form, Item, View, Label, StyleSheet } from 'react-native';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
onLogin() {
const { username, password } = this.state;
Alert.alert('Credentials', `${username} + ${password}`);
}
render() {
return (
<View style={styles.container}>
<Text style={{fontWeight: 'bold'}}>
My App
</Text>
<TextInput
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
placeholder={'Username'}
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'Password'}
secureTextEntry={true}
style={styles.input}
/>
<Button rounded success
title={'Login!'}
style={styles.input}
color = '#65c756'
onPress={this.onLogin.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#1b1c1c',
},
input: {
width: 200,
height: 33,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
});