CODEWITHSUNDEEP
react-native
Pranab V V
Pranab V V

Reputation: 1446

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

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

enter image description here

using flexbox algorithm how can I add space in between the button components?

Upvotes: 3

Views: 10680

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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>

Upvotes: 7

Related Questions