How to show json data in flatlist in react native

 1. Create json data. Format is given below

    JsonData.json

[

    {

        "id" : 1,

        "FirstName" : "Sandeep",

        "LastName" : "Rauniyar",

        "DOB" : "4-7-1990",

        "CovidVaccine" : "Pfizer BioNTech",

        "FirstDose" : "EN6888",

        "SecondDose" : "ER8861",

        "image": "https://bootdey.com/img/Content/avatar/avatar1.png"

    },

    {

        "id" : 2,

        "FirstName" : "Mukesh",

        "LastName" : "Verma",

        "DOB" : "10/29/1995",

        "CovidVaccine" : "JANSSEN",

        "FirstDose" : "2030020",

        "SecondDose" : "",

        "image": "https://bootdey.com/img/Content/avatar/avatar2.png"

    }

]

2. import JsonData.json

import PostData from "../Data/JsonData.json";

3. Set data

    const [data, setData] = useState(PostData.filter(item=>item.id ==1 ));

 

4. 

<FlatList

   data={data}

   keyExtractor= {(item) => {

   return item.id;

   }}

   renderItem={({item}) => {

   return (

     <View>

        <View style={styles.box}>

           <Image style={styles.icon1} source={{uri: item.image}} />

           <View style={styles.boxContent}>

           <Text style={styles.title}>First Name : {item.FirstName}</Text>

            <Text style={styles.description}>Last Name :  {item.LastName}</Text>

            <Text style={styles.description}>DOB :  {item.DOB}</Text>

        <Text style={styles.description}>Covid-19 Vaccine : {item.CovidVaccine}</Text>   

             </View>

                </View>

             

            </View>

          )

        }}/>