What styles I have to write for alignment items (react-native) - css

Question

I have a component with TextInput and another component which is called CompanyAddress. Each company can have many addresses, therefore I have to have "plus" button.
There are container styles
const AppStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ffffff",
alignItems: "center",
justifyContent: "center"
},
inputStyle: {
height: 40,
width: '80%',
borderColor: '#28c9d9',
textAlign: 'center',
borderWidth: 1,
marginBottom: 20,
fontSize: 16
}
});
there is main component
<KeyboardAvoidingView behavior="padding" style={AppStyles.container}>
<TextInput
autoCompleteType="name"
placeholder="organization"
maxLength={30}
style={AppStyles.inputStyle}
onChangeText={(text) => { this.setState({name: text})} }
/>
<CompanyAddress/>
</KeyboardAvoidingView>
and there is CompanyAddress
class CompanyAddress extends React.Component<any, any> {
render() {
return (
<View style={styles.container}>
<TextInput
autoCompleteType="name"
placeholder="address"
maxLength={30}
style={[AppStyles.inputStyle, styles.textInput]}
/>
<AntDesign style={styles.plus} name="plus" size={24} color="black" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
flexDirection: 'row'
},
textInput: {
width: '70%',
},
plus: {
width: '30%'
}
});
but my CompanyAddress now looks like that
but I want to change styles for achieve that

Answer 1

you can add justifyContent:center to the container and for the children alignSelf:Center
ex:
<View style={{justifyContent : center,flexDirection:row}}>
<View style={{alignSelf:Center}}><View>
<View style={{alignSelf:Center}}><View>
</View>