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 AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay