Why are my React Native View heights inconsistent? - react-native

Question

I have the following code:
return (
<>
<View style={styles.dashboardListItemContainer}>
<View style={styles.listItemBorder} />
</View >
</>
)
const styles = StyleSheet.create({
dashboardListItemContainer: {
minHeight: 73,
backgroundColor: COL_DARK_BG,
display: "flex",
flexDirection: "column",
},
listItemBorder: {
minHeight: 0.5,
backgroundColor: 'white',
}
});
Which produces the following result:
My question is, why are the lines inconsistently bright / appear to be different heights?
Also when I change column to row here: flexDirection: "row", the line disappears completely. I can't tell if this is a bug or there are errors in my code?
TIA.
Update:
I cannot solve this problem on any device, and I've tried different methods for determining the height.
borderBottomWidth: StyleSheet.hairlineWidth, looks like this:
You can see in the above picture some lines do not even show up.
borderBottomWidth: StyleSheet.hairlineWidth * 2, looks like this:
And height: 0.5, looks like this on a white background:
The problem is consistent across devices, it is at the edge of an item in a <FlatList>.

Answer 1

Android Emulator has less resolution, try on a real device, sometimes i have the same error, and when I run on a real device it looks good.

Answer 2

We can use flex value.
import React, { Component } from "react";
import { View, FlatList } from "react-native";
import { StyleSheet } from "react-native";
class App extends Component {
render() {
return (
<FlatList
data={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
extraData={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
horizontal={false}
renderItem={({ item, index }) => {
return (
<View style={styles.dashboardListItemContainer}>
<View style={styles.listItemBorder} />
</View>
);
}}
key={({ item, index }) => index}
/>
);
}
}
export default App;
const styles = StyleSheet.create({
dashboardListItemContainer: {
backgroundColor: "red",
display: "flex",
flex: 1,
minHeight: 73,
flexDirection: "column"
},
listItemBorder: {
minHeight: 0.5,
backgroundColor: "yellow"
}
});