DEV Community

Cover image for Flatlist in React-Native
Khandokar Nafis Jaman
Khandokar Nafis Jaman

Posted on

Flatlist in React-Native

The component known as React Native FlatList makes it possible to render lists with minimal effort and code.
Flatlist can be done in vertical and horizontal way. We can also make a grid view using Flatlist. We can make the item of the list clickable. Let's see a example.

import React, { Component } from 'react';
import { View, FlatList, Text, Image, Alert } from 'react-native';
class App extends Component {
  //create json array
  MyData=[
    {id:'1',title:"Bangladesh", subtitle:"Sakib", img:"https://cdn.pixabay.com/photo/2023/05/15/09/18/iceberg-7994536_1280.jpg"},
    {id:'2',title:"Australia", subtitle:"Smith", img:"https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"},
    {id:'3',title:"England", subtitle:"Anderson", img:"https://media.istockphoto.com/id/1172437911/photo/budapest-hungary-the-main-tower-of-the-famous-fishermans-bastion-from-above.jpg?s=1024x1024&w=is&k=20&c=WDvMoCZDycINy23u9r31noMQU28nZz_kBP27_vvEKOo="},
    {id:'4',title:"India", subtitle:"Kohli",img:"https://media.istockphoto.com/id/1172437974/photo/budapest-hungary-aerial-view-of-the-main-tower-of-fishermans-bastion-with-illuminated.jpg?s=1024x1024&w=is&k=20&c=Kn5Jz6qaUwT_qBwwf5Ljq-bPOAf4je7uS-CWfUIC5Hc="},
    {id:'5',title:"Pakistan", subtitle:"RIzwan",img:"https://media.istockphoto.com/id/1285333630/photo/turkey-aerial-drone-high-point-view.jpg?s=1024x1024&w=is&k=20&c=JXt3dk3JO-ysRwCTdPLAOYNvHE0EYGSmvwom4Nok5-E="},
    {id:'6',title:"New-zealand", subtitle:"Boult",img:"https://cdn.pixabay.com/photo/2023/06/28/20/15/spider-8095142_1280.jpg"},
    {id:'7',title:"South Africa", subtitle:"De kock",img:"https://cdn.pixabay.com/photo/2023/06/11/08/52/waves-8055488_1280.jpg"},
    {id:'8',title:"Zimbabwe", subtitle:"Raza",img:"https://cdn.pixabay.com/photo/2023/06/28/09/12/waterfalls-8093877_1280.jpg"},
    {id:'9',title:"Ireland", subtitle:"Campher",img:"https://cdn.pixabay.com/photo/2023/06/01/05/58/clouds-8032705_1280.jpg"},
    {id:'10',title:"Afghanistan", subtitle:"Rashid",img:"https://cdn.pixabay.com/photo/2023/06/02/17/28/nature-8036126_1280.png"},
    {id:'11',title:"England", subtitle:"Root",img:"https://cdn.pixabay.com/photo/2023/06/28/20/15/spider-8095142_1280.jpg"},
    {id:'12',title:"Bangladesh", subtitle:"Hasan",img:"https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"},
    {id:'13',title:"Ireland", subtitle:"Tector",img:"https://cdn.pixabay.com/photo/2023/06/28/11/25/man-8094211_1280.jpg"},
    {id:'14',title:"England", subtitle:"Butler",img:"https://cdn.pixabay.com/photo/2023/06/15/13/50/coffee-machine-8065457_1280.jpg"},
    {id:'15',title:"Bangladesh", subtitle:"Towhid",img:"https://cdn.pixabay.com/photo/2023/07/04/07/25/self-consciousness-8105584_1280.jpg"},
  ];

  //clickable function
    onClickItem=(alertTitle)=>{
      Alert.alert(alertTitle)
    }
  childView=({ctitle, csubtitle, img})=>{
    return(
    /* vertical  
    <View style={{flexDirection:'row',backgroundColor:'#fffeed',margin:5, padding:10, flex:100}}>
        <View style={{flex: 30}}>
            <Image style={{height:50, width:60}} source={{uri:img}} />
        </View>

        <View style={{flex: 70, backgroundColor:'#fffdee',}}>
          <Text style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
          <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
        </View>

      </View>*/

    /*horizontql       
    <View style={{flexDirection:'column',width:120,height:180,backgroundColor:'#fabcdf',margin:5, padding:10,}}>
        <View >
            <Image style={{height:120, width:"100%"}} source={{uri:img}} />
        </View>

        <View style={{ backgroundColor:'#fabcde',}}>
          <Text style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
          <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
        </View>

      </View>
     */
    //grid view
      <View style={{flexDirection:'column',width:120,height:180,backgroundColor:'#fabcdf',margin:5, padding:10,}}>
      <View >
          <Image style={{height:120, width:"100%"}} source={{uri:img}} />
      </View>

      <View style={{ backgroundColor:'#fabcde',}}>
        <Text onPress={this.onClickItem.bind(this,ctitle)} style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
        <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
      </View>

    </View>
    )
  }
  render() {
    return (
    //   <FlatList horizontal={true} data={this.MyData} renderItem={({item}) => <this.childView ctitle={item.title} csubtitle={item.subtitle} img={item.img}/>}/>
    <FlatList numColumns={3} horizontal={false} data={this.MyData} renderItem={({item}) => <this.childView ctitle={item.title} csubtitle={item.subtitle} img={item.img}/>}/>
    );
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Hope, you can get benefited from it. Thanks in advance.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs