How to get total view to center in react native - react-native

Question

I am new to react native, and I have created one sample login form. In this form i want to align total view to center. I tried this way but not working, Can You guide me how to achieve this.
My login class is
import React, {Component} from 'react';
import {AppRegistry,Text, View,TextInput,TouchableOpacity,StyleSheet} from 'react-native';
export default class Login extends Component{
render(){
return(
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder="Acc No/User ID"/>
<TextInput style={styles.textInput} placeholder="Password"/>
<TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity>
</View>
);
}
login=()=>{
alert("testing......");
// this.props.navigation.navigate('Second');
}
}
AppRegistry.registerComponent('Login', () => Login);
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 24,
marginBottom: 60,
color: '#fff',
fontWeight: 'bold',
},
textInput: {
alignSelf: 'stretch',
padding: 10,
marginLeft: 80,
marginRight:80,
},
btn:{
alignSelf: 'stretch',
backgroundColor: '#01c853',
padding: 10,
marginLeft: 80,
marginRight:80,
alignItems: 'center',
}
});
And the following is the screen shot of above code.
And i tried with the bellow code, but not working
container:{
justifyContent: 'center',
alignItems: 'center',
flex:1
},
So please help me, how to do this?
Thanks In Advance..

Answer 1

Use the flex display : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
import React, { Component } from 'react';
import { AppRegistry, Text, View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder="Acc No/User ID" />
<TextInput style={styles.textInput} placeholder="Password" />
<TouchableOpacity style={styles.btn} onPress={this.login}><Text>Log In</Text></TouchableOpacity>
</View>
);
}
login = () => {
alert("testing......");
// this.props.navigation.navigate('Second');
}
}
AppRegistry.registerComponent('Login', () => Login);
const styles = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
},
textInput: {
padding: 10,
textAlign: 'center',
},
btn: {
backgroundColor: '#01c853',
paddingVertical: 10,
paddingHorizontal: 50,
}
});
And by the way, you could have easily found an answer with a simple search (Vertically center view react-native) : https://moduscreate.com/blog/aligning-children-using-flexbox-in-react-native/

Answer 2

just add flex :1 to your container style
container:{
flex:1,
justifyContent: 'center',
alignItems: 'center',
}

Answer 3

import React,{Component} from 'react';
import {View,Text,TextInput, Button,StyleSheet,Alert} from 'react-native';
class App extends Component{
state = {
userId:'',
password:'',
};
render(){
return(
<View style={styles.container}>
<View>
</View>
<View>
<TextInput
placeholder="User ID"
style={styles.loginTextInput}
onChangeText={(value) => this.setState({userId: value})}
value={this.state.userId}
></TextInput>
<TextInput
placeholder="Password"
style={styles.loginTextInput}
onChangeText={(value)=>this.setState({password:value})}
></TextInput>
<Button
title="Login"
style={styles.loginBtn}
onPress={this.loginCheck}
></Button>
</View>
</View>
)
}
loginCheck=()=>{
if((this.state.userId=='admin') && (this.state.password=='admin')){
Alert.alert("Login Success");
}else{
Alert.alert("User and password is not match\n Please try again");
}
}
}
export default App;
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
},
loginTextInput:{
borderColor:'#ebe9e6',
borderWidth:1,
margin:5,
},
loginBtn:{
backgroundColor: '#01c853',
paddingVertical: 10,
paddingHorizontal: 50,
}
})