React native FlatList right icon
Lists are one of the common scrollable components to display similar types of data objects. A list is like an enhanced version of a ScrollView component to display data. React Native provides a FlatList component to create a list. FlatList only renders the list items that can be displayed on the screen. FlatList is a specialized implementation of the Virtualized List component to display a limited number of items that can fit inside the current window. The rest of the items will be rendered with the list scrolling action. FlatList can simply be implemented using the data and renderItem props to create a list. data takes an array of items, of type any, to populate items in the list. renderItem requires a function that takes an item object as an input from the data source to construct and return a list-item component. Optional props are used to decorate FlatList using an item-divider, header/footer, pull-to-refresh, handle refreshing or optimization logic. ItemSeparatorComponent is used to add a separator to visually separate items. keyExtractor is used to provide a unique value (ID, email, etc.) to avoid the recreation of the list by tracking the reordering of the items. extraData takes a boolean value to re-render the current list. FlatList is a Pure Component that does not re-render against any change in the state or props objects, so extraData prop is used to re-render the current list if the data array is being mutated. initialNumToRender is used to render a minimum number of item-components in a FlatList for efficiency. ListEmptyComponent is used to display an empty view while the data is being downloaded. ListHeaderComponent is used to add a header component like search, menu-items, etc. ListFooterComponent is used to add a footer component like total items, data summary etc. getItemLayout returns the predefined size of the list-item component to skip the size calculation process at runtime to speed up the rendering process. horizontal prop takes a boolean value to create a horizontal list by returning like horizontal={true}. numColumns is used to create a column-based list.onRefresh and refreshing are used to implement pull-to-refresh controls, and maintain their visibility using a boolean flag. onEndReached and onEndReachedThreshold are used to implement lazy loading callback with a given threshold value. There are other props that can be used to implement style, scrolling, etc.React always uses a unique key to track the updates in a component.
By default, the FlatList looks either for a custom keyExtractor implementation or a field named key in a data item, otherwise it uses the array index as the value of key. The id is a unique value in the response that can be used to implement the keyExtractor. FlatList offers great flexibility to create and configure a list in a React Native app. FlatList can be optimized for static and dynamic data using various layout calculations and rendering props.
The FlatList component displays the similar structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time. The FlatList shows only those renders elements which are currently displaying on the screen,not all the elements of the list at once. The FlatList component takes two required props: data and renderItem. The data is the source of elements for the list,and renderItem takes one item from the source and returns a formatted component to render. To implement the FlatList component, we need to import FlatList from 'react-native' library.
__________________________________________________________________________
