React-Native Button Align Center

Question

I'm using native base button i want to align the button in the center of the screen i tried this:

<Container style={{flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',}}>
         <Form style={{}}>
              <Item last>
                    <Input placeholder='Username' 
                    style={{color:'white'}}/>
                </Item>
              <Item last>
                  <Input placeholder="Password"
                  style={{color:'white'}} />
              </Item>

              <Button style={{width:170,backgroundColor:'#99004d',marginTop:20,}}>
                    <Text style={{marginLeft:50}}>Login</Text>
              </Button>

              <Text style={{color:'white'}}>{this.props.Name}</Text>
          </Form>
        </Container>

But it reducing the size of input field the result I'm getting is following:

Did you find a solution to this? – Marklar Mar 20 '17 at 03:14 — Marklar, Mar 20 '17 at 03:14
@Marklar you can use flex layout – Ahsan Azwar Mar 30 '17 at 12:44 — Ahsan Azwar, Mar 30 '17 at 12:44

score 32 · Accepted Answer · answered Jul 09 '17 at 21:42

I haven't used the Form / Item components you are using, but here is what was learned when I figured out my own similar login form:

The justifyContent and alignItems styles define how the children behave, so try putting the text inputs into a different parent than the button:

<View style={styles.loginTextSection}>
   <TextInput placeholder='UserName' style={styles.inputText} />
   <TextInput placeholder='Password' style={styles.inputText} secureTextEntry={true}/>
</View>

<View style={styles.loginButtonSection}>
     <Button onPress={() => doLoginStuff()} 
             style={styles.loginButton}
             title="Login"
     />

</View>

const styles = StyleSheet.create({
   loginTextSection: {
      width: '100%',
      height: '30%',
   }

   loginButtonSection: {
      width: '100%',
      height: '30%',
      justifyContent: 'center',
      alignItems: 'center'
   }

   inputText: {
      marginLeft: '20%',
      width: '60%'
   }

   loginButton: {
     backgroundColor: 'blue',
     color: 'white'
   }
}

If you are using native base, you need to add flexDirection: "row", then it will solve the issue. — Rico Chan, Oct 05 '19 at 05:24

score 2 · Answer 2 · answered Apr 28 '21 at 13:33

2

you can just add the following style :

position: 'relative',
height: 500,
alignItems: 'center',
justifyContent: 'center',

answered Apr 28 '21 at 13:33

Karim Baidar

677
3
10

score -1 · Answer 3 · answered Jun 29 '23 at 09:33

-1

 <button 
  style={{width:'270px', backgroundColor:'#99004d', marginTop:20, 
  marginLeft:'750px'}} 
  className="btn btn-outline-secondary btn-lg btn-block">
  Home Page
 </button>

answered Jun 29 '23 at 09:33

vish

1

Your answer could be improved with the help of supporting information and explanations as to how this answers the question – Harrison Jul 04 '23 at 11:59

React-Native Button Align Center

3 Answers3

Linked