FlatList - HorizontalList and GridList

Hey Guys!! Good Day!!!

In last post, we have seen how to implement pull to refresh, scroll and filtering feature in FlatList. Today, let's see how to implement a FlatList as horizontal list and also as header of another FlatList.

Making FlatList as Horizontal one is so easy in React Native with a single property, horizontal. Setting that to {true} will work as expected.

And making FlatList to have two columns is also simple in React Native. It needs a property, numColumns, where we can pass the no. of columns to be implemented.

Let's combine both of the features.i.e., At top of the page, lets have a horizontal list and below that let's have a grid of 2 columns, like below:

Nice na??!! So we can make the grid one as our main list and the top horizontal list as the header of the list. For that, ListHeaderComponent is to be used.

import React, { Component } from 'react';
import {
  AppRegistry,
  FlatList,
  StyleSheet,
  Image,
  View,
  Text,
} from 'react-native';

export default class MultipleList extends Component {
  renderHeader = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.titleText}> Cute Bunnies </Text>
        <FlatList
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          data={[
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYKPosMtajB0C9dslsu40ULhA4wuR23Sf9-qrEfFOAlQKJu6Tu',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTf_-wB9jlT1TsEiSJO1h5noJ-7tU-GDq1S3OvUR130pUZbX55M',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShDA7qyIV6HdMeNnLdGhHvwrmfnMO_u4ej96x3UoJX8xrw8Ihj',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQH2XIGwiRBxXrS2YykXqZsfzLSnBFpDsGIuTFPzogEXmuqMaDj',
            },
            {
              key: 'https://t1.uc.ltmcdn.com/fr/images/9/1/6/img_combien_de_temps_vit_un_lapin_12619_orig.jpg',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6zGeM_VjCg7Vg6PYxo_le1UnB69wWbrOCHGFKE8ej1DMj1PVZ',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFTN4l_bBTEt-Ljum8BbhRvEYP8CGjX_RT7AtZyXBw27Zo-pKK',
            },
            {
              key: 'https://ae01.alicdn.com/kf/HTB14b7uSXXXXXabXFXXq6xXFXXXY/Mini-rabbits-keychain-mink-fur-girl-real-8cm-bunny-keychain-key-chains-fur-bunny-bags-Rabbit.jpg_640x640.jpg',
            },
          ]}
          renderItem={({ item }) => (
            <Image source={{ uri: item.key }} style={styles.itemHorizontal} />
          )}
        />
        <Text style={styles.titleText}>Cats</Text>
      </View>
    );
  };
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[

            {
              key: 'https://akm-img-a-in.tosshub.com/indiatoday/images/story/201708/cats-xl_080817011942.jpg',
            },
            {
              key: 'https://static.wixstatic.com/media/852a4b_e85adf0cce4e4d5b8e77b4fdb3a130da~mv2_d_2000_1500_s_2.jpg/v1/fill/w_784,h_588,al_c,q_90,usm_0.66_1.00_0.01/852a4b_e85adf0cce4e4d5b8e77b4fdb3a130da~mv2_d_2000_1500_s_2.webp',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6PM9qemwe2q9SnGwP9_M3jx735U0LPV3bp2BzxZBfn8ZYeXBS',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_IGJgKDiYiX8bZmaLG-hrxnpt3N8K0SiKZ4d5JY9LdenF6XFj',
            },
            {
              key: 'http://r.ddmcdn.com/s_f/o_1/cx_0/cy_0/cw_300/ch_300/w_300/APL/uploads/2014/10/kitten-cuteness300.jpg',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqVfFyGTd9v1B6GqwCZjRppotZ27pxzYNhQauJFITkcFkggMf0',
            },
            {
              key: 'https://livingwithmuchness.files.wordpress.com/2016/11/catfight.jpg',
            },
            {
              key: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5Ny85NTkvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzYzOTcxNjY1LmpwZw==',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSom5DE-OzwWUWIsCFivq73-UVn2ufW9Wbyyr8MqieYiq5lij7b',
            },

            {
              key: 'https://livingwithmuchness.files.wordpress.com/2016/11/catfight.jpg',
            },
            {
              key: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVD5jIp0O3kopO0DUdGGPYZrqXRsD-bm2e_6K7a4Gk6s0Jsto7',
            },
            {
              key: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5Ny85NTkvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzYzOTcxNjY1LmpwZw==',
            },
          ]}
          renderItem={({ item }) => (
            <Image source={{ uri: item.key }} style={styles.itemVertical} />
          )}
          numColumns={2}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  itemHorizontal: {
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    width: 70,
    height: 100,
  },
  itemVertical: {
    marginTop: 10,
    marginLeft: 10,
    width: 160,
    height: 100,
  },
  titleText: {
    padding: 5,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => MultipleList);

Some new props like, showsHorizontalScrollIndicator={false} and showsVerticalScrollIndicator={false} have been used here. Those are nothing but to hide horizontal and vertical scrollbar respectively. That's it! We have done that!!! ;) 

Uhh.. Okay.. Enough of FlatList!!! Let's learn something new in next post. Until then, Byeee!!