Children overflow when using space-between inside container with flexWrap (React-Native) - react-native

Question

Just noticed a very weird behavior when using flexWrap on React-Native and wanted some help to understand if there's any explanation for that.
In summary:
I have a horizontal container that uses flexWrap, with two vertical child containers that will have two squares inside each. The squares have different heights. If I use space-between in the vertical child containers with flexWrap in the horizontal container, the children will overflow. If I remove flexWrap, things work correctly.
This problem doesn't happen on react-native-web, but happens on Android and iOS.
Expo with code: https://snack.expo.dev/fHKKvLlew
Without flexWrap (expected behavior, works correctly)
<View style={{ backgroundColor: 'purple', flexDirection: 'row' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
With flexWrap (unexpected behavior)
<View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
Anyone knows why the result is not the same when using flexWrap, given that there's still a lot of space available? And why children overflows?
Seems to be a bug (specially because it works fine on web). If so, any idea of a workaround that could result on similar results?

Answer 1

I test the code using codesandbox and I am not able to replicate the problem:
Perhaps there is sometime else causing the problem.
EDIT:
As mentioned, this behavior happens just for react native mobile, not for react native web, one way to get around this is by adding:
alignItems: 'flex-start'
As described in this this post:
Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.
So to replicate your configuration you may try:
<View style={{ alignItems: "flex-start", backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ alignSelf: "stretch", borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>