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

Redis installation in Red Hat Linux

 In this post we will see step by step installation of Redis service in Redhat/CentOS operation system. To install Redis, run this command in terminal -dnf install redis This command will install the redis service in your machine. Verify installation -systemctl status redis -systemctl start redis -systemctl enable redis Note: Before start redis service set Linux Kernal overcommit memory to 1 by adding vm.overcommit_memory = 1 to /etc/sysctl.conf file. Why we should do that: As we know redis is in memory data store. It primarily uses RAM to store data. Redis and other processes use RAM memory. We set vm.overcommit_memory = 1 to make sure Kernal not overcommit the memory by allocating memory to new program which required more memory than available memory. In this scenario OOM (Out Of Memory) killer terminate the rest of processes. We also restricting Kernal not to terminate the important services running and also stop swapping redis and other importance service to device i/o device,...
Post a Comment
Read more

Prepared statements, form submission, form validation and displaying errors in php

PHP Code. Insert statement Query. INSERT INTO `users`(`user_id`, `user_first`, `user_last`, `user_email`, `user_uid`, `user_pwd`) VALUES (1,'Adnan','Zaib','text@.com','Admin',1234) What are Prepared statements and how to use them //Created a sql prepare template $sql = "SELECT * FROM users WHERE user_uid=?;"; //than send to database with certain values left(unspecified parameters). //Create a prepared statement $stmt = mysqli_stmt_init($conn);   //prepare the prepared statement if(!mysqli_stmt_prepare($stmt, $sql)){ echo "sql statement failed"; }else{ //bind values to parameters and further to placeholder mysqli_stmt_bind_param(#stmt, "s",); // ‘s’ stands for datatype of parameter that you are going to pass. }   while($row = mysqli_fetch_assoc($result)){ echo $row['user_uid'] . "<br>"; } PHP form Validation   <?php // define variables and set to empty values $name = $email = $gender = $comment = ...
Post a Comment
Read more