reactjsreact-nativenative-base

React-Native Button Align Center


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:

enter image description here


Solution

  • 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'
       }
    }