Margins when using multiple views in RN - react-native

Question

I have a multiple Views, ImageBackground etc that are all nested.
Each time there is a View there is an additionnal margin that is added and my list is in a very restrictive area.
I set margin to 0 but it doesn't solve the problem.
Do you know how I can avoid useless margin around the list ?
I have tested to set margin to 0 and marginLeft, Right, etc but I dont understand way I still have margin
render() {
return (
<View style ={styles.container}>
<ImageBackground
source={require("./images/image1.jpg")}
style={styles.imageBackground}>
<View style ={{flex:14}}>
<View style={styles.flatListContainer}>
<View style={styles.List}>
<FlatList
data={[
{key: 'ab'},
{key: 'cd'},
{key: 'ef'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
<View style={styles.midList}>
<FlatList
data={[
{key: 'gh'},
{key: 'ij'},
{key: 'kl'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
<View style={styles.List}>
<FlatList
data={[
{key: 'mn'},
{key: 'op'},
{key: 'qr'},
]}
renderItem={({item}) => <Text style={styles.text}>{item.key}</Text>}
/>
</View>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
margin: 0,
},
mainContainer: {
flex: 1,
alignItems: 'center',
},
flatListContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
margin: 0
},
List: {
margin: 0
},
midList: {
borderLeftColor: '#00AABB',
borderLeftWidth: 1,
marginLeft: 0,
borderRightColor: '#00AABB',
borderRightWidth: 1,
marginRight: 0,
marginBottom: 33,
},
logo: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
imageContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
//backgroundColor: '#fff',
//justifyContent: 'center',
alignItems: 'center',
},
touchOpacity: {
flex: 1,
alignItems: 'center',
resizeMode: "contain",
marginLeft: 0
},
imageBackground: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
headText: {
flex: 1,
alignItems: 'center',
textAlign: 'center',
color: 'white',
},
safety: {
flex: 0.2,
alignItems: 'center',
color: 'greenyellow',
},
text: {
flex: 2,
textAlign: 'center',
color: 'white',
},
});
```

Answer 1

Can you try the following, I just updated the styles.
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require("./images/image1.jpg")}
style={styles.imageBackground}
>
<View style={{ width: "100%", height: "100%" }}>
<View style={styles.flatListContainer}>
<View style={styles.List}>
<FlatList
style={{ flex: 1 }}
data={[{ key: "ab" }, { key: "cd" }, { key: "ef" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
<View style={styles.midList}>
<FlatList
data={[{ key: "gh" }, { key: "ij" }, { key: "kl" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
<View style={styles.List}>
<FlatList
data={[{ key: "mn" }, { key: "op" }, { key: "qr" }]}
renderItem={({ item }) => (
<Text style={styles.text}>{item.key}</Text>
)}
/>
</View>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
// alignItems: "center",
// margin: 0
},
mainContainer: {
flex: 1,
alignItems: "center"
},
flatListContainer: {
flex: 1,
// alignItems: "center",
flexDirection: "row"
// margin: 0
},
List: {
// margin: 0,
flex: 1
},
midList: {
flex: 1,
borderLeftColor: "#00AABB",
borderLeftWidth: 1,
// marginLeft: 0,
borderRightColor: "#00AABB",
borderRightWidth: 1,
marginRight: 0
// marginBottom: 33
},
logo: {
flex: 1,
flexDirection: "row",
alignItems: "center"
},
imageContainer: {
flex: 1,
alignItems: "center",
flexDirection: "row",
//backgroundColor: '#fff',
//justifyContent: 'center',
alignItems: "center"
},
touchOpacity: {
flex: 1,
alignItems: "center",
resizeMode: "contain",
marginLeft: 0
},
imageBackground: {
width: "100%",
height: "100%"
// alignItems: "center"
// justifyContent: "center"
},
headText: {
flex: 1,
alignItems: "center",
textAlign: "center",
color: "white"
},
safety: {
flex: 0.2,
alignItems: "center",
color: "greenyellow"
},
text: {
// flex: 2,
textAlign: "center",
color: "white",
backgroundColor: "red"
}
});