failed to add space between children of view container in react-native - react-native

Question

I have a parent view container it contains another view having two button components.I need to have a space between the button components for that I add justify-content into the child view container,but it's not working.
code
import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class WelcomePage extends Component {
render() {
const {navigate}=this.props.navigation
return (
<View style={{flexDirection:'column',flex:1,alignItems:'center',justifyContent: 'flex-start'}}>
<Avatar
width={Dimensions.get('window').width}
containerStyle={{flex:85}}
avatarStyle={{flex:85}}
imageProps={{resizeMode:'cover'}}
source={require('../assets/images/logo.png')}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
<View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between'}}>
<Button large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
<Button large title='REGISTER' icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() => navigate('register')} containerViewStyle={{borderRadius:5}} borderRadius={5} />
</View>
</View>
)
}
}
output
using flexbox algorithm how can I add space in between the button components?

Answer 1

You need to remove the style alignItems:'center' from the parent wrapper.
Since alignItems: 'center' aligns your child elements to the center, then you can't see the effect of justifyContent: 'space-between'
Therefore modify your code as follows
<View style={{flexDirection:'column',flex:1,justifyContent: 'flex-start'}}> // Remove alignItems here
<Avatar
width={Dimensions.get('window').width}
containerStyle={{flex:85}}
avatarStyle={{flex:85}}
imageProps={{resizeMode:'cover'}}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
<View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between', paddingLeft: 20, paddingRight: 20}}> // Added some padding for a bettwer view
<Button large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
<Button large title='REGISTER' icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() =>{}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
</View>
</View>