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