Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28480

How to create Horizontal Scrolling Flatlist with 2 rows and 3 columns visible in React Native?

$
0
0

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: Vertical Scrolling Flatlist. There is numOfColumns to specify count of columns but there is nothing for rows. When I tried to set horizontal={true}, layout became weird: Horizontal Scrolling Flatlist Also it throws error that numOfColumns can not be applied with Horizontal Scrolling Flatlist. Please refer attached screenshot for Desired output: Desired Output.

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.


Viewing all articles
Browse latest Browse all 28480

Trending Articles