Как прокручивать изображения по горизонтали с двумя столбцами, верхняя строка содержит четные изображения, а нижняя строка содержит нечетные изображения

Привет, я хочу прокручивать изображения по горизонтали с двумя столбцами, верхняя строка содержит четные изображения, а нижняя строка содержит нечетные изображения, но я не знаю, как это сделать

код для получения API

componentDidMount(){
return fetch('https://www.json-generator.com/api/json/get/ccLAsEcOSq?indent=1')
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      isLoading: false,
      dataSource: responseJson.book_array,
    }, function(){
    });
  })
  .catch((error) =>{
    console.error(error);
  });}

код для рендера

render() {
if (this.state.isLoading === true) {
  return <ActivityIndicator color = {'red'} />;
}
return (
  <View style = {styles.container}>
    <ScrollView horizontal = {true} contentContainerStyle = {{height:300, flexWrap:'wrap'}}>
        {this.state.dataSource.map(item => this.renderItem(item))}
    </ScrollView>
  </View>
);

} }

код для рендеритем

renderItem(item) {
return (
  <View style = {{ margin: 5 }}>
    <View style = {{
        backgroundColor: 'red',
        width: 150,
        height: 150,
        marginBottom: 1,
      }}>

         <Image  style = {{ width: 150,height: 150}}
                      source = {{uri: item.image}}/>
    </View> 
    <View style = {{
        backgroundColor: 'red',
        width: 150,
        height: 150,
        marginBottom: 1,
      }}>
         <Image  style = {{ width: 150,height: 150}}
                      source = {{uri: item.image}}/>
    </View> 
  </View>
);

}