make a vertical scroll view with horizontal rows react native - react-native

Question

I'm new to programming and react-native and I'm trying to make a Scrollview and get values from a JSON file and show 2 boxes in each row but when I use flexDirection : 'row' they all merge into each other.
Thank you I appreciate every help.
The section below is my code:
export default class Creative extends Component {
constructor(props) {
super(props);
this.state = { isLoading: true, refreshing: false, }
}
_fetchData = () => {
const key = 'D0BEFCE031A955294DE1DD87C14B13EA77CBF8A86F293FD30E9B8D57F3C401F9';
var type = 'creative';
const lal = `imapp=${key}&type=${type}`;
fetch('https://facebook.github.io/react-native/movies.json', {
method: 'get',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
}),
}).then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
isLoading: false,
dataSource: responseJson.list,
refreshing: false,
});
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
this._fetchData();
}
_onRefresh = () => {
() => this.setState({ refreshing: true, });
status = '1';
this._fetchData();
}
render() {
return (
<SafeAreaView>
<View style={{ backgroundColor: '#323232' }}>
<View style={{ flex: 1, paddingTop: 20 }}>
<View style={{ flex: 1, paddingTop: 20 }}>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <Text>{item.title}, {item.releaseYear}</Text>}
keyExtractor={({ id }, index) => id}
/>
</View>
</View>
</View>
</SafeAreaView>
);
}
}

Answer 1

Use numColumns in ReactNative Flatlist to render multiple columns & Change your Flatlist as below
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => (
<View style={{ width: '40%', justifyContent: 'space-between', backgroundColor: 'red', margin: 5 }}>
<Text>{item.title}, {item.releaseYear}</Text>
</View>
)}
keyExtractor={item => item.id}
numColumns={2}
/>
Change this according to your requirements.
Hope this helps you. Feel free for doubts.