What is the FlatList component and how to use it in React Native?

FlatList is a container that can be used to load list items. It offers header and footer support, multi-column support, vertical/horizontal scrolling, lazy loading, and more.

Here are some important features of FlatList-

Supports scrolling loading
• Ability to adjust scrolling using ScrolltoIndex support
• Supports header and page Pin
• Multiple column support
Cross-platform
• Configurable visibility callback

The basic structure of FlatList is as follows-

<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

FlatList is implemented through the VirtualizedList component, which is responsible for displaying a limited number of items that fit into the current view port of the mobile screen. The remaining data is rendered as the user scrolls. Basic properties such as data and renderItem can be used to create a FlatList.

To use FlatList, you need to import it from React-Native as shown below-

import { FlatList} from "react-native";

Some important properties of FlatList are listed below-

Props	Description
Data	Contains the data to be displayed array.
renderItem	renderItem({ item, index, seperators }); item - It is the item in the data field displayed in list format. index - Each item has an index. separators - is a function that helps in rendering props. The available functions are - separators.highlight(), separators.unhighlight(), separators.updateProps().
ListEmptyComponent	Will be used when the list is empty The component class, rendering function or rendering element called. This component can be helpful if you want to perform some action when the list is empty.
ListFooterComponent	The component class, render function or render element that will be rendered at the bottom of all items.
ListFooterComponentStyle	The required styling for the footer component can be done here.
ListHeaderComponent	Component class, render function or render element that will be rendered on top of all items.
ListHeaderComponentStyle	The required styling for the header component can be done here.
Horizontal strong>	If set to true, this property will render the item horizontally.
keyExtractor	Extracts the unique key for a given index. This key is used for caching and also to track item reordering. (item: object, index: number) => string;

Example 1: Display items in FlatList vertically

The The example shows how FlatList works. To use FlatList, first import the components -

import { FlatList , Text, View, StyleSheet } from "react-native";

I need FlatList along with other components like text, views, stylesheets, etc. They are imported as shown above.

After the import is completed, I need to display the data in the FlatList. The data is stored in this.state.data as shown below-

this.state = {
   data: [
      { name: "Javascript Frameworks", isTitle: true },
      { name: "Angular", isTitle: false },
      { name: "ReactJS", isTitle: false },
      { name: "VueJS", isTitle: false },
      { name: "ReactNative", isTitle: false },
      { name: "PHP Frameworks", isTitle: true },
      { name: "Laravel", isTitle: false },
      { name: "CodeIgniter", isTitle: false },
      { name: "CakePHP", isTitle: false },
      { name: "Symfony", isTitle: false }
   ],
   stickyHeaderIndices: []
};

Function that implements renderItem

The following function is responsible for getting the item and display the same item in the text component as shown below -

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

The text component is wrapped inside the view component. item.isTitle is a variable, check its true/false and set it to bold accordingly and assign it a color.

To implement FlatList

Here is the FlatList implementation with data and renderItem properties.

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

this.state.data is given the data attribute and >this. The renderItem function is assigned to the renderItem property.

Based on your data you can tell that the key property will be the only one in the data array and should provide the same value to props keyExtractor. If not given, it will treat the array index as a key value.

So we treat the name as a unique Key and assign it to the keyExtractor.

keyExtractor={item => item.name}

This is the complete code to implement FlatList.

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return ({item.name});};
render() {
   return ();
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Output

##Example 2: Displaying items in a FlatList horizontally

To display FlatList items horizontally, you simply change props Horizon ​​ntal={true} Just add it to your FlatList component.

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return ({item.name});};
   render() {
      return ();
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: 100,
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
});

Output

The above is the detailed content of What is the FlatList component and how to use it in React Native?. For more information, please follow other related articles on the PHP Chinese website!