Styjun

Hii i want to display images horizontally having 2 columns for this i am using scrollview but i dont know how to do that , i am using following code

code to fetch 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);
 );

code for render

render() 
if (this.state.isLoading === true) 
 return <ActivityIndicator color='red' />;

return (
 <View style=styles.container>
 <ScrollView horizontal=true>
 this.state.dataSource.map(item => this.renderItem(item))
 </ScrollView>
 </View>
);

}

code for renderItem

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>
);

Instead of ScrollView try FlatList which provides numColumns props which lets you allow to use columns as per your choice.

Instead of this,

<ScrollView horizontal=true>
 this.state.dataSource.map(item => this.renderItem(item))
</ScrollView>

Use this,

<FlatList 
 data=this.state.dataSource
 numColumns=2
 renderItem=this.renderItem
/>

For more details of FlatList see Official Docs Here

Try flex-direction property:

renderItem(item) 
return (
 <View style= margin: 5, flex: 1, flexDirection: "row", justifyContent: "space-around" >
 <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>
);

modify your ScrollView component Like this:

<ScrollView horizontal=true contentContainerStyle=height:300, flexWrap:'wrap'>
this.state.dataSource.map(item => this.renderItem(item))
</ScrollView>

Use flat list inside scroll view like this

<FlatList
 horizontal=true
 data=this.state.dataSource
 renderItem=( item ) => (this.renderItem(item))
 />

rearrange dataSource like this

array1 = [obj1,obj2,obj3,obj4,obj5,obj6,obj7,
array2=[[obj1,obj2],[obj3,obj4],[obj5,obj6],[obj7,obj8]]

and then render item with 2 rows.

didn't find any other way

To create view as you required need to implement your custom logic. In render function call a intermediate function to get columns in two row:

render() {
if (this.state.isLoading === true) 
 return <ActivityIndicator color='red' />;

return (
 <View style=styles.container>
 <ScrollView horizontal=true>
 this.renderHorizantol(this.state.dataSource)
 </ScrollView>
 </View>
);

In renderHorizantol function need to set up logic for even or odd rows, i am implementing this on index of dataSource Array:

renderHorizantol = (dataSource) =>
 let view = []
 for(let i=0 ; i < data.length ; i = i+2)
 
 let subView = this.renderItem(dataSource[i],dataSource[i+1])
 view.push(subView) 
 
 return view 

In renderItem function pass two element to draw upper and lower row contents:

renderItem(item1,item2) 
 let image1 = item1["imageUrl"]
 let image2 = item2 ? item2["imageUrl"] : null
 return (
 <View style= margin: 5 >
 <View style=
 backgroundColor: 'red',
 width: 150,
 height: 150,
 marginBottom: 1,
 >
 <Image style= width: 150,height: 150
 source=uri: image1/> 
 </View> 

 <View style=
 backgroundColor: 'red',
 width: 150,
 height: 150,
 marginBottom: 1,
 >
 <Image style= width: 150,height: 150
 source=uri: image2/> 
 </View> 
 </View>
);