View not rendering with given size - expo

Question

I got a weird issue with react-native using expo, as you can see on the images, some rendered elements don't have the width and height that I've give to them, but instead a random number between (A little more or a little less). It's not a big deal when you have a simple list but when you have to display a nested array (see images), you can have weird and undesired spaces, and you can clearly see with the borders that there is a problem.
(Completely new blank expo project version 3.22.3, code below work as expected with react native web so you can't reproduce using codesandbox for example)
Simple Image
import React from 'react'
import { StyleSheet, View } from 'react-native'
export default function App() {
const array = [1, 1, 1, 1, 1, 1, 1, 1, 1]
return (
<View style={styles.container}>
{array.map(() => (
<View style={styles.row} key={Math.random()}></View>
))}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
row: {
borderWidth: 0.5,
backgroundColor: 'red',
width: 30,
height: 30
}
})
Nested Image
import React from 'react'
import { StyleSheet, View } from 'react-native'
export default function App() {
const array = [
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1]
]
return (
<View style={styles.container}>
{array.map((row) => (
<View style={styles.row} key={Math.random()}>
{row.map(() => (
<View style={styles.column} key={Math.random()}></View>
))}
</View>
))}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
row: {
flexDirection: 'row'
},
column: {
borderWidth: 0.5,
backgroundColor: 'red',
width: 33,
height: 33
}
})
So if you have any idea.. Thanks !

Answer 1

The screenshot shows the styles from ExpoRoot. You need to look at the properties View.
Everything is showing correctly. The rendered elements have the width and height you specified.
For the second problem, I think this is only on the Android emulator. If you build or test on a real device, you should be fine.
You can use codesandbox to create a react-native project and test the code.