Skip to main content

10. Use components or display components in loop using flat list in react native

 I this article we will discuss and cover two major points.

1) How to  use / display components in flatlist.

2) How to use props while using components in Flat list.

Let say we have array of student data we can iterate over it using flat list .just the normal behaviour.

But if i want to pass the single by single student data to StudentProfile component in flatlist.

Here is the example code read and understand the logic.


  import { FlatList, StyleSheet, Text, View } from "react-native";
 const ComponentInFlatList = () => {
    const students = [
        {
            id: 1,
            name: 'Adnan',
            email: 'exp@email.com'
        },
        {
            id: 2,
            name: 'Zaib',
            email: 'exp@email.com'
        },
        {
            id: 3,
            name: 'AAli',
            email: 'exp@email.com'
        },
        {
            id: 6,
            name: 'usman',
            email: 'exp@email.com'
        },
        {
            id: 7,
            name: 'AAli',
            email: 'exp@email.com'
        }
    ];
    return (
        <View>
            <Text style={styles.heading}>Component in FlatList in react-natice</Text>
            <FlatList
                data={students}
                renderItem = {({item})=> <StudentDeails item={item} />}
            />
        </View>
    );
}

const StudentDeails = (props) => {
    const item = props.item;
    return (
        <View style={styles.box}><Text style={styles.item}>{item.name}</Text>
        <Text style={styles.item}>{item.email}</Text></View>
    );
}

const styles = StyleSheet.create({
    heading: {
        fontSize: 16,
        color: 'purple'
    },
    box: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: "space-evenly",
        padding:4,
        margin:4,
        borderWidth: 2,
        borderColor: 'pink',
        borderRadius: 6
    },
    item: {
        // borderWidth: 2,
        width:"100%",
        textAlign:"center"

    }

})

export default ComponentInFlatList;


Labels:

Comments

Post a Comment

Popular posts from this blog

Install MariaDB Latest Version 11.4 in Red Hat Version 9

 This this post i will show you step by step the installation process of mariaDB in red hat version 9. Step1 Run the command to pull the latest updated packages on applications installed in your system. -dnf update If you get Kernal update than reboot the system -reboot Step2 Go to official mariaDB site Make mariadb repository in /etc/yum.repos.d Place the configuration in this file # MariaDB 11.4 RedHatEnterpriseLinux repository list - created 2024-09-24 11:12 UTC # https://mariadb.org/download/ [mariadb] name = MariaDB # rpm.mariadb.org is a dynamic mirror if your preferred mirror goes offline. See https://mariadb.org/mirrorbits/ for details. # baseurl = https://rpm.mariadb.org/11.4/rhel/$releasever/$basearch baseurl = https://mirrors.aliyun.com/mariadb/yum/11.4/rhel/$releasever/$basearch # gpgkey = https://rpm.mariadb.org/RPM-GPG-KEY-MariaDB gpgkey = https://mirrors.aliyun.com/mariadb/yum/RPM-GPG-KEY-MariaDB gpgcheck = 1 Now install the mariaDB with its dependencies package...
Post a Comment
Read more

3_Abstract Factory Pattern

Abstract factory pattern provide concept of factory of factories.  Abstract design pattern is on of the creational design pattern that provide us the interface of creating related or independent objects without specifying the concrete classes and their specifications. In other words,  Abstract design pattern is the way of organizing, How we can create groups of things that are related to each other. Think of it, like factory of factories. Let walk through the practical example of car production system using abstract factory design pattern for getting better understanding. Scenario: we are building card of two different types , ElectricCars and PetrolCars. Each car have different types of  1) Engine 2)Tyres Goals: Using abstract design pattern we have to create families of Electric and Petrol car parts. What types of classes will be use in this design pattern. 1) Abstract Products (Interface). 2) Concrete Products: These are concrete classes which implement Abstract Produ...
Post a Comment
Read more

How to find out if a package is installed in Linux?

1) How to find out if a package is installed or not in Linux There are multiple ways to check find locate package is installed in linux machine or not 1.a) Using which command The  ‘which’  command returns an executable path that can be executed when the command is entered in the terminal. # which vi /usr/bin/vi 1.b) Using whereis command The  ‘whereis’  command is used to search the binary, source, and man page files for a given command. # whereis vi vi: /usr/bin/vi /usr/share/man/man1/vi.1p.gz /usr/share/man/man1/vi.1.gz 1.c) Using locate command The  ‘locate’  command performs faster than the find command because it uses an updatedb database, whereas the find command searches in real time. # locate --basename '\nano' /usr/bin/nano /usr/share/nano /usr/share/doc/nano 2) How to find out whether a package is installed or not in Linux, using package manager 2.a) On CentOS / Red Hat (RHEL) 6/7 Use  yum command  or  rpm command  to deter...
Post a Comment
Read more