I'm seeing a discrepency in my React Native app between Web vs Native Mobile — it's about setting the alignSelf property of elements in flex containers with flexDirection: row and flexWrap: wrap. On web, this works as I expect — each row of this flexWrap container implicitly takes up half of the total height of the group, which allows me to align elements as I'd like within the row (the word "all" has alignSelf: flex-end, "from" has alignSelf: center, etc)
On native mobile, though, the row doesn't expand to be tall enough — it always fits its height to the tallest contained element. I've tried adding alignItems: stretch along with alignContent: stretch to get these implicit row containers to expand to their full possible height, but that only seems to work on web. Is there something wrong with my styling, or is this a bug with React Native? And if so, are there any known workarounds?
side-by-side comparison of web (left) and iPhone simulator (right)
Android looks the same as on iPhone
Here are the styles for my wrapper view (the red box)
{"maxWidth": "100%","flexDirection": "row","flexWrap": "wrap","alignContent": "stretch","justifyContent": "flex-start","rowGap": 0,"columnGap": 10,"flexGrow": 1}and for example, one of the elements (they only differ by the 'alignSelf' property')
{"alignSelf": "center","minWidth": 37,"minHeight": 0,"width": 37,"height": "auto","flexShrink": 0,"flexGrow": 1,"backgroundColor": "transparent","borderWidth": 0,"borderRadius": 0,"paddingTop": 0,"paddingRight": 0,"paddingBottom": 0,"paddingLeft": 0,"opacity": 1,"shadowColor": "#AAAAAA","shadowOffset": {"width": 0,"height": 0 },"shadowRadius": 0,"shadowOpacity": 0.5,"elevation": 0,"justifyContent": "center"}