Guide on making a Horizontal Flatlist in React Native displaying 2 rows and 3 columns at a time

Question

Guide on making a Horizontal Flatlist in React Native displaying 2 rows and 3 columns at a time

I am looking to create a Horizontal Scrolling Flatlist with 2 rows and 3 columns visible, pulling dynamic data from an API. Currently, I have successfully implemented a vertical scrolling Flatlist that resembles the following: https://i.sstatic.net/oJJyA.png. There is a parameter called numOfColumns to set the number of columns, but nothing for rows. Upon attempting to set horizontal={true}, the layout became distorted: https://i.sstatic.net/14VwP.png Additionally, it throws an error indicating that numOfColumns cannot be used with a Horizontal Scrolling Flatlist. Please refer to the attached screenshot for the Desired output: https://i.sstatic.net/X3IMP.png.

This is my code for the 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 modifications should be made to achieve the desired outcome.

javascript android ios react-native react-native-flatlist

Answer 1

Answer №1

class Application extends Component {
  renderListItems = ({item, index}) => {
    <FlatList
      data={item}
      renderItem={this.renderNestedListItems}
    />
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.state.categoryData}
          renderItem={this.renderListItems}
        />
      </View>
    );
  }
}

Answer 2

class Application extends Component {
  renderListItems = ({item, index}) => {
    <FlatList
      data={item}
      renderItem={this.renderNestedListItems}
    />
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.state.categoryData}
          renderItem={this.renderListItems}
        />
      </View>
    );
  }
}

Answer 3

Answer №2

To create this effect, you can nest a Horizontal Flatlist inside Vertical Flatlist items like so:

Vertical FlatList
<FlatList  
   data={[  
   {imageKey: 'image1', imageKey: 'image2', imageKey: 'image3'}, {imageKey: 'image4', imageKey: 'image5', imageKey: 'image6'}, {imageKey: 'image7', imageKey: 'image8', imageKey: 'image9'} ]}  
    renderItem={({item}) =>  
       <FlatList  
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         data={item}  
         renderItem={({item}) =>  
          <Text>{item.key}</Text>}  
       /> 
   />

Answer 4

To create this effect, you can nest a Horizontal Flatlist inside Vertical Flatlist items like so:

Vertical FlatList
<FlatList  
   data={[  
   {imageKey: 'image1', imageKey: 'image2', imageKey: 'image3'}, {imageKey: 'image4', imageKey: 'image5', imageKey: 'image6'}, {imageKey: 'image7', imageKey: 'image8', imageKey: 'image9'} ]}  
    renderItem={({item}) =>  
       <FlatList  
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         data={item}  
         renderItem={({item}) =>  
          <Text>{item.key}</Text>}  
       /> 
   />

Answer 5

Answer №3

Encountered the same problem while attempting to display the desired output of this question using a JSON array data structure

[{"id": 1, "name": "John", "image": "/api/12.jpg"}, {"id": 2, "name": "James", "image": "/api/14.jpg"}, {"id": 3, "name": "David", "image": "/api/172.jpg"} ...]

I attempted various approaches to render it in a two-row format without success. As a result, I modified the JSON to have the following structure:

    [
      [
         {"id": 1, "name": "John", "image": "/api/12.jpg"}, 
         {"id": 2, "name": "James", "image": "/api/14.jpg"}, 
         {"id": 3, "name": "David", "image": "/api/172.jpg"} 
           ...
      ],
      [
         {"id": 9, "name": "Kim", "image": "/api/12hj.jpg"}, 
         {"id" 10, "name": "Jim", "image": "/api/14ff.jpg"}, 
         {"id" 11, "name": "Rose", "image": "/api/1723.jpg"} 
         ...
      ]
]

You can obtain this JSON format in two ways:

Using backend API
By splitting the JSON array into chunk arrays within a single array using JavaScript code in componentDidMount or a function.

Subsequently, you can use the provided code to achieve the desired output for this question

<ScrollView
      
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      
      >
        //two row formatted JSON array
        {this.state.checkData.map((dd, index) => 
          
            <FlatList
           
            contentContainerStyle={{alignSelf: 'flex-start'}}
            numColumns={3} //<---------- here we can change the number of rows
            data={dd}
            renderItem={({ item: rowData }) => {
           
              return (
                <TouchableOpacity style={{ padding: 6}} onPress={() => this.props.navigation.navigate('RDetails', { id: rowData.id })}>

                  <View style={{flex: 1, height:110, width: 96}}>

                  
                  <View style={{ flex: 1 }}>
                    <Image resizeMode='stretch' style={{ borderRadius: 5, width: 80, height: 70, margin: 2 }} source={{ uri: rowData.image }} />

                  </View>
                  
              </View>

                </TouchableOpacity>
              );

            }
            }
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      </ScrollView>

Answer 6

Encountered the same problem while attempting to display the desired output of this question using a JSON array data structure

[{"id": 1, "name": "John", "image": "/api/12.jpg"}, {"id": 2, "name": "James", "image": "/api/14.jpg"}, {"id": 3, "name": "David", "image": "/api/172.jpg"} ...]

I attempted various approaches to render it in a two-row format without success. As a result, I modified the JSON to have the following structure:

    [
      [
         {"id": 1, "name": "John", "image": "/api/12.jpg"}, 
         {"id": 2, "name": "James", "image": "/api/14.jpg"}, 
         {"id": 3, "name": "David", "image": "/api/172.jpg"} 
           ...
      ],
      [
         {"id": 9, "name": "Kim", "image": "/api/12hj.jpg"}, 
         {"id" 10, "name": "Jim", "image": "/api/14ff.jpg"}, 
         {"id" 11, "name": "Rose", "image": "/api/1723.jpg"} 
         ...
      ]
]

You can obtain this JSON format in two ways:

Using backend API
By splitting the JSON array into chunk arrays within a single array using JavaScript code in componentDidMount or a function.

Subsequently, you can use the provided code to achieve the desired output for this question

<ScrollView
      
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      
      >
        //two row formatted JSON array
        {this.state.checkData.map((dd, index) => 
          
            <FlatList
           
            contentContainerStyle={{alignSelf: 'flex-start'}}
            numColumns={3} //<---------- here we can change the number of rows
            data={dd}
            renderItem={({ item: rowData }) => {
           
              return (
                <TouchableOpacity style={{ padding: 6}} onPress={() => this.props.navigation.navigate('RDetails', { id: rowData.id })}>

                  <View style={{flex: 1, height:110, width: 96}}>

                  
                  <View style={{ flex: 1 }}>
                    <Image resizeMode='stretch' style={{ borderRadius: 5, width: 80, height: 70, margin: 2 }} source={{ uri: rowData.image }} />

                  </View>
                  
              </View>

                </TouchableOpacity>
              );

            }
            }
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      </ScrollView>

Answer 7

Answer №4

Another approach is to utilize the _.chunk function from Lodash library.

For instance:

{_.chunk(data, 2).map((item, index) => (
  <View key={index} style={{flexDirection: "column"}>
  {item.map((subItem, subIndex) => (

  <Text key={subIndex}>{subItem}</Text>

  ))}
  </View>
))}

Answer 8

Another approach is to utilize the _.chunk function from Lodash library.

For instance:

{_.chunk(data, 2).map((item, index) => (
  <View key={index} style={{flexDirection: "column"}>
  {item.map((subItem, subIndex) => (

  <Text key={subIndex}>{subItem}</Text>

  ))}
  </View>
))}

Guide on making a Horizontal Flatlist in React Native displaying 2 rows and 3 columns at a time

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What steps should I take to resolve the 'buffer' issue in my jsonwebtoken?

Switch the glyphicon based on the open/closed state of the collapsible element - Bootstrap

Issue with executing a jQuery event within a JavaScript object due to application error

How to apply class binding within a v-for loop in Vue.js

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

Ways to make a div disappear gradually when the user is not active, or completely remove it to reveal a different div

Troubleshooting ng-repeat in AngularJS: Multi checkbox filter malfunction

Sluggish Bootstrap Carousel Requires Mouseover or Click to Start Sliding

What is the best way to reset the dropdown state back to its initial setting whenever I change tabs?

What is the best way to apply multiple text shadows to a single piece of text using the jQuery ".css()" method?

Looking for a .NET MVC AJAX search solution. How can I enhance the code below?

Set the class of the list item to "active" class

Tips for sequentially executing URL requests in Node.JS without triggering a stack overflow

While loop not yielding immediate result with asynchronous function

Preserve the newline character within a string in JavaScript

Error: The function referenced is not defined when the page loads

E2E testing on mobile devices with the Webdriver JavaScript client API from the official source

steps for adding text to the header with selenium webdriver

Tips for updating an Android RelativeLayout dynamically when the orientation shifts without resetting the Activity

Extracting the call from REST API in JSON format