CODEWITHSUNDEEP
javascriptcssreactjsreact-nativeflexbox
Tj3n
Tj3n

Reputation: 9923

How to shrink or force equal height between components in row

I'm new to RN, I have trouble dealing with the height priority involve image which I can't seems to find a way to resolve.

Basically I want to have the Image's height to be always equal to the total height of the next view in the row (the view with styles.itemDetails).

The Image always grow to its image native height, and if I use aspectRatio it ignore the resizeMode property and won't grow to the available space.

enter image description here

Component:

    <View style={styles.item}>
      <Image style={styles.itemImg} source={source} />
      <View style={styles.itemDetails}>
        <Text>{poi.name}</Text>
        <Text>{poi.conciseDescription}</Text>
      </View>
    </View>

Styles:

const styles = StyleSheet.create({
  item: {
    marginTop: 8,
    marginHorizontal: 8,
    borderRadius: 8,
    backgroundColor: '#E5E5E5',
    flexDirection: 'row',
  },
  itemImg: {
    flex: 1,
    borderTopLeftRadius: 8,
    borderBottomLeftRadius: 8,
    resizeMode: 'cover',
  },
  itemDetails: {
    flex: 2,
    margin: 16,
    backgroundColor: 'green',
  },
  itemTitle: {
    fontSize: 22,
  },
});

Upvotes: 0

Views: 198

Answers (2)

aseferov
aseferov

Reputation: 6393

You can get itemDetails height with onLayout event and set to image height

const [imageHeight, setImageHeight] = useState(0)

<View style={styles.item}>
  <Image style={[styles.itemImg, {height: imageHeight}]} source={source} />
  <View 
       style={styles.itemDetails} 
       onLayout={e => { setImageHeight(e.nativeEvent.layout.height) }}
  >
    <Text>{poi.name}</Text>
    <Text>{poi.conciseDescription}</Text>
  </View>
</View>

Upvotes: 1

Eddy N.
Eddy N.

Reputation: 55

Try setting your itemImg to 1em:

img {height: 1em;}
<div>
  <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" /> Your Text
</div>

If that doesn't work, you could try setting the parent element "item" to inline-flex and/ or remove flex: 1,.

Upvotes: 0

Related Questions