'React Native minHeight acting like paddingBottom, how is this happening?

I have one container that wraps some children. The number of children is dynamic, and when there are none, the parent container is not visible. To address this, I added the minHeight value, and perfect, it worked as expected. However, when there are children, this minHeight is somehow behaving as padding-bottom, for sure.

I know this sounds crazy, and it's been driving me crazy, but I'm sure of it. I know this to be the case because I've reviewed all the styling over and over and when I remove the minHeight value when there are two rows or more of children, this effect goes away! However, now I'm back to square one which is the parent is not visible without this minHeight when there are no children. So I have no idea how to fix this. I've replicated the situation on this Snack demo, and strangely, it behaves just fine there. So I have no idea how the heck this is happening, does anyone have any idea what setting might cause minHeight to behave like a padding-bottom?

With minHeight: enter image description here

Without minHeight (but now I can't see black background when no children are present): enter image description here

react-nativelayoutstyles


Solution 1:[1]

you need to know the height for children to order put the correct height for the parent you can handle height for children in const like this

const HEIGHT_ELEMETE=20

then put this var in your style

  parent: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    backgroundColor: 'black',
    borderRadius: 5,
    padding: 2,
    minHeight: HEIGHT_ELEMETE,
  },
  element: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'grey',
    padding: 2,
    margin: 2,
    borderRadius: 5,
    height:HEIGHT_ELEMETE
  },

expo

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yoel

Related Questions