React Native – FlatList || How to create FlatList in react native

A variety of components are available in React Native for displaying lists of data. You should often use either FlatList or SectionList.

The FlatList show a scrolling list of changing, but similarly structured, data. The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time.

Data and renderItem are the two props that the FlatList component needs. The list’s information comes from data. One item is taken from the source by renderItem, which then produces a formatted component to render.

App.js

import React from 'react';
import { StyleSheet, Text, View , FlatList, SafeAreaView} from 'react-native';

export default function App() {
  const DATA = [
     
    {
        id: 1,
        title: 'Liam',     
      },
      {
        id: 2,
        title: 'Oliver', 
      },
      {
        id: 3,
        title: 'Elijah',  
      },
      {
        id: 4,
        title: 'Noah', 
      },
      {
        id: 5,
        title: 'Amelia',  
      },
      
     
  ];

  return (
    <SafeAreaView>
      <View>
            <View style={{height:2,backgroundColor:"#e0fdff" ,marginTop:16,marginBottom:20}}/>
            <Text style={{height : 30, fontWeight: 'bold'}}>      Flat List</Text>
            <FlatList 
                data={DATA}
                renderItem={(item) => (
                 
                    <View  style={{paddingBottom: 4, paddingLeft: 16, paddingRight: 16}}>
                    <View style={styles.container}>
                        <Text>
                            {item.item.title}
                        </Text>
                    </View>
                    </View>
                )}
            />
         </View> 
    </SafeAreaView>
    
  );
}

const styles = StyleSheet.create({
  container: {
      padding: 8,
      backgroundColor: 'lightgray',
      borderRadius: 6
  },
  text: {
      flexDirection:'row',
      flexWrap:'wrap',
      color : "white"
  },
});

Output: