React native: change button size in center screen - reactjs

Question

I am new to React Native currently learning about the technology.
I start create a card layout with buttons inside it.
This is my layout :
<KeyboardAvoidingView
behavior='padding'
keyboardVerticalOffset={50}
style={styles.screen}>
<LinearGradient
colors={['#ffedff', '#ffe3ff']}
style={styles.gradient}>
<Card style={styles.card}>
<ScrollView>
<View style={styles.buttonContainer}>
<Button
color={Colors.primary}
title='ورود'
onPress={() => { }} />
</View>
</ScrollView>
</Card>
</LinearGradient>
</KeyboardAvoidingView>
and this is my stylesheet :
const styles = StyleSheet.create({
screen: {
flex: 1
},
gradient: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
card: {
width: '90%',
height: '80%',
padding: 20
},
buttonContainer: {
alignItems: 'center',
marginVertical: 30,
},
});
and result is:
I want to make button bigger so i added width to buttonContainer but button changed position to left of screen and its size does not change.
buttonContainer: {
width: '40%',
alignItems: 'center',
marginVertical: 30,
},
How could i change button width when it is in the center of screen?

Answer 1

So basically alignSelf:'center' was the problem. Removing that worked. Check the expo link below and the code :
import React from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
KeyboardAvoidingView,
ScrollView,
Button
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient'
import Card from './Card';
export default AuthScreen = () => {
return (
<KeyboardAvoidingView
behavior='padding'
keyboardVerticalOffset={50}
style={styles.screen}>
<LinearGradient
colors={['#ffedff', '#ffe3ff']}
style={styles.gradient}>
<Card style={styles.card}>
<ScrollView>
{/* <View style={styles.wcContainer}>
<Text style={styles.headerText}>خوش آمدید</Text>
</View> */}
{/* <View style={styles.container}>
<Text style={styles.text}>نام کاربری</Text>
<TextInput style={styles.input} />
<Text style={styles.text}>رمز عبور</Text>
<TextInput style={styles.input} />
</View> */}
<View style={styles.buttonContainer}>
<Button
color= 'red'
title='ورود'
style={{marginHorizontal:200}}
onPress={() => { }} />
</View>
</ScrollView>
</Card>
</LinearGradient>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1
},
gradient: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
card: {
width: '90%',
height: '80%',
padding: 20
},
buttonContainer: {
// marginHorizontal:200,
width:'100%',
// alignItems: 'center',
// marginVertical: 30,
justifyContent:'center'
},
});
expo link : expo link
hope it helps. feel free for doubts

Answer 2

I fixed this problem with :
buttonContainer: {
width: '40%',
alignSelf: 'center',
marginVertical: 30,
}
Now this is my layout: