I want to create a Horizontal Scrolling Flatlist with 2 rows and 3 columns visible. Data will be dynamic from api. I have managed to create vertical scrolling Flatlist which looks like this:
Image may be NSFW.
Clik here to view.
.
There is numOfColumns to specify count of columns but there is nothing for rows. When I tried to set horizontal={true}, layout became weird:
Image may be NSFW.
Clik here to view.
Also it throws error that numOfColumns can not be applied with Horizontal Scrolling Flatlist. Please refer attached screenshot for Desired output: Image may be NSFW.
Clik here to view.
.
My Code for Vertical Scrolling Flatlist:
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
style={{ width: '90%', marginTop: 10, marginLeft: 10, backgroundColor: 'transparent', borderRadius: 5, alignSelf: 'center' }}
bounces={false}
// horizontal={true}
numColumns={3}
data={this.state.categoryData}
renderItem={({ item: data, index }) => {
return (
<ServiceView viewWidth={'100%'} viewHeight={'100%'} viewPaddingLeft={1} viewPaddingRight={10} viewPaddingTop={1} viewPaddingBottom={12} serviceName={(globalUserType == 'provider') ? data.services.name : data.name} serviceIconUrl={(globalUserType == 'provider') ? data.services.image : data.image} jobCount={(globalUserType == 'provider') ? '' : ''} showDot={(globalUserType == 'provider') ? false : false}
serviceAction={
() => this.navigateTo('category', data)
}/>
What changes should i make to get desired output.
