CODEWITHSUNDEEP
react-native
rams
rams

Reputation: 1580

How to get total view to center in react native

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.enter image description here

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..

Upvotes: 1

Views: 6023

Answers (3)

Md Dablu Hossain
Md Dablu Hossain

Reputation: 1

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,
    }
    
})

Upvotes: 0

Nima
Nima

Reputation: 1932

just add flex :1 to your container style

 container:{
   flex:1,
   justifyContent: 'center',
   alignItems: 'center',
 }

Upvotes: 0

R.Duteil
R.Duteil

Reputation: 1217

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/

Upvotes: 5

Related Questions