CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
Waltari
Waltari

Reputation: 1249

Resized image takes up too much UI space

I have an absolutely positioned round image. The image needs to take only 17% of screen width, and also be positioned 5 pixels from the top.

Problem is, when I resize the image to take up 17% of screen width, it does so but at the same time the container becomes elongated. The image itself does not stretch, but is positioned in the middle of the elongated Image container.

Styles: 

const styles = StyleSheet.create({
    imageBase: {
        position: 'absolute',
        left: 15,
        top: 5,
        width: '17%',
        resizeMode: 'contain',
        backgroundColor: 'red',
    }
});

What I'm rendering: 

<Image 
       style = { styles.imageBase }
       source = { require('roundImage.png') }>
</Image>

Current result: What it looks like now

I need it to either cut off the extra space from the Image container, or position the image at the top of the container, instead of middle.

What I'm trying to do: enter image description here

Upvotes: 0

Views: 200

Answers (1)

Isilher
Isilher

Reputation: 331

One way to solve this is to wrap your image in a View with an aspect ratio of 1:

<View style={{ flex: 1 }}>
  <View
    style={{
      position: 'absolute',
      left: 15,
      top: 5,
      width: '17%',
      aspectRatio: 1,
    }}
  >
    <Image
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: 'red',
        resizeMode: 'contain',
      }}
      source={require('roundImage.png')}
    />
  </View>
</View>

Upvotes: 1

Related Questions