React Native; How to place spaces in FlatList - react-native

Question

I am trying to build a flat list in react native but am having trouble keeping the specific list items from not touching. I tried to use the itemSeparatorComponent but the problem still persisted.
This is my FlatList component
<View style={{ position: "absolute", bottom: -35, marginLeft: 40 }}>
<FlatList
horizontal
data={this.state.hitRecords}
renderItem={({ item }) => (
<ArticleBox
title={item.title}
year={item.year}
time={item.time}
author={item.author}
/>
)}
itemSeparatorComponent = {()=> </View>}
/>
</View>
This is my ArticleBox component
const styles = StyleSheet.create({
box: {
backgroundColor: "rgba(0.0,0.0,0.0,0.9)",
height: 150,
width: 300,
alignSelf: "center",
flex: 2,
flexDirection: "column",
borderRadius: 25,
elevation: 2
},
layout: {
textAlign: "center",
color: "#FFF"
},
input: {
color: "#ff8c00"
}
});
class ArticleBox extends Component<Props> {
render() {
return (
<View style={styles.box}>
<Text style={styles.layout}>
Time: <Text styles={styles.input}>{this.props.time}</Text>
</Text>
<Text />
<Text style={styles.layout}>Publication Year: {this.props.year}</Text>
<Text />
<Text style={styles.layout} numberOfLines = {3} >Publication Title: {this.props.title}</Text>
<Text />
<Text style={styles.layout}>Author: {this.props.author}</Text>
</View>
);
}
}
I am trying to get the list to behave like this
item item item item
but the list behaves like this
itemitemitemitem

Answer 1

Add marginLeft: 12 in your 'ArticleBox' Component. like this.
box: {
backgroundColor: "rgba(0.0,0.0,0.0,0.9)",
height: 150,
width: 300,
alignSelf: "center",
flex: 2,
flexDirection: "column",
borderRadius: 25,
elevation: 2,
marginLeft: 12
}