CODEWITHSUNDEEP
react-native
Pranab V V
Pranab V V

Reputation: 1446

issue with flex dimension in react-native

I am trying to align my layout screen with flexbox,but there is unwanted space in between component children.

import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
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}
              height={Dimensions.get('window').width*500/500}
              containerStyle={{flex:80}}
              imageProps={{resizeMode:'cover'}}
              source={require('../assets/images/logo.png')}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
            />
            <View style={{flexDirection:'row',flex:20}}>
                <Button  large title='LOGIN' icon={{name: 'user-secret',type:'font-awesome'}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
                <Button  large title='REGISTER' icon={{name: 'user-plus',type:'font-awesome'}} onPress={() => navigate('register')} containerViewStyle={{borderRadius:5}} borderRadius={5} />
            </View> 
            </View>
        )
    }
}

output enter image description here

in the above output you can see an unwanted space at the start and in between the button and the image component.what is the issue here?

Upvotes: 0

Views: 283

Answers (2)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

You have

  • Added the containerStyle to be flex: 80, but your avatar's height = screen width, therefore is aligned to the center and show's some space.

Therefore you need to remove the

height={Dimensions.get('window').width*500/500}

and add the flex to the image, to cover the entire flex as

avatarStyle={{flex:80}}

<Avatar
                    width={Dimensions.get('window').width}
                    containerStyle={{flex:80}}
                    avatarStyle={{flex:80}}
                    imageProps={{resizeMode: 'cover'}}
                    source={require('../assets/images/logo.png')}
                    onPress={() => console.log("Works!")}
                    activeOpacity={0.7}
                />

Upvotes: 1

xuhaib
xuhaib

Reputation: 768

If you want Avatar to have a specific height to fill up vertically then

1- Remove flex from Avatar and its sibling View.

2- Change 500/500 accordingly in height prop of your Avatar or you can try Dimensions.get('window').height. Reason: The expression 500/500 evaluates to 1, which effectively makes your Avatar a square with width and height equal to Dimensions.get('window').width.

Alternatively, if Avatar/Image size is as intended, then you can refer this for bit more explanation on behavior of children of a flexbox, if you want.

Upvotes: 0

Related Questions