Button refuses to centre horizontally in container - ios

Question

I am trying to get a hang of React Native, but for some reason, I can't get the button to centre horizontally in view container.
export default class LoginScreen extends Component {
static navigationOptions = {
header: null,
}
render() {
return (
<View style={styles.container}>
<MKTextField
tintColor={config.colors.accent}
floatingLabelEnabled={true}
autoFocus={true}
textInputStyle={{color: config.colors.primary, height: 32}}
placeholder="Login"
style={styles.loginInput}
onTextChange={(text) => this.setState({text})} />
<MKButton
style={styles.button}
shadowRadius={2}
shadowOffset={{width:0, height:2}}
shadowOpacity={.7}
shadowColor="black"
onPress={() => {
console.log('hi, raised button!');
}}>
<Text pointerEvents="none"
style={{color: 'white', fontWeight: 'bold', alignSelf:'center'}}>
Login
</Text>
</MKButton>
</View>
);
}
}
const styles = StyleSheet.create({
loginInput: {
width: '100%'
},
logo: {
height: '25%'
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
paddingLeft: 16,
paddingRight: 16
},
button: {
backgroundColor: config.colors.primary,
borderWidth: 0,
height: 40,
justifyContent: 'center',
alignItems: 'center',
}
});
And here's what it looks like:
Can't really tell whats going haywire here!

Answer 1

In your style, you need to change alignItems to alignSelf
button: {
backgroundColor: config.colors.primary,
borderWidth: 0,
height: 40,
justifyContent: 'center',
alignSelf: 'center',
}