Introducing FlatList in React

If you've utilized the FlatList component in React Native, you'll find the FlatList for React to be quite familiar, though they differ in API functionality. This component is designed to handle lists efficiently by offering features like:

• Searching
• Filtering
• Sorting
• Grouping
• Pagination
• Infinite scrolling
• Scrolling to top functionality

To render the array of people, the implementation is straightforward:

const renderPerson = (person, idx) => {

return (

<div key={idx}>

{person.firstName} {person.lastName} ({person.info.age})

</div>

);

};

Alternatively, you can create a dedicated Person component:

const Person = ({firstName, lastName, info}) => {

return (

<div>

{firstName} {lastName} ({info.age})

</div>

);

};

Then pass this component to the FlatList:

<FlatList

list={people}

renderItem={Person}

/>

Every key in the person object becomes an individual prop for the Person component, making it easy to manage the data structure.

Rendering and Display Options

Rendering the list is a breeze. Just specify your list-like object along with a function or component for rendering each item. The list prop can accept various types such as Map, Set, Object Literal, or an Array, eliminating the need to convert the data.

By default, items are wrapped in a React Fragment, but you can customize the wrapper:

<FlatList

wrapperHtmlTag="ul"

id="people-list"

/>

Control how items are displayed, such as adjusting gaps between them:

<FlatList

displayRow

rowGap="10px"

list={people}

renderItem={Person}

/>

You can also create a responsive grid layout by specifying optional properties for grid management:

<FlatList

displayGrid

gridGap="10px 15px"

minColumnWidth="150px"

list={people}

renderItem={Person}

/>

Handling Empty Lists

FlatList allows you to define a custom render function for when the list is empty, which can be useful for displaying messages or loaders:

renderWhenEmpty={() => <div>No Items</div>}

Advanced Functionalities

You can easily reverse a list or set limits on how many items to display:

<FlatList

reversed

list={people}

renderItem={Person}

/>

<FlatList

limit={5}

list={people}

renderItem={Person}

/>

Searching and Filtering Capabilities

Searching through lists is simplified with the searchTerm prop, and you can easily filter based on specific keys:

<FlatList

searchTerm={searchTerm}

searchBy="firstName"

searchCaseInsensitive

list={people}

renderItem={Person}

/>

For more granular control, you can provide your own search function or use shorthand properties for configuring search options.

Sorting and Grouping

Sorting is also straightforward with the sort prop, and you can group items easily using the groupOf prop.

<FlatList

sortBy="info.age"

list={people}

renderItem={Person}

/>

<FlatList

groupOf={3}

list={people}

renderItem={Person}

/>

Pagination and Infinite Scrolling

FlatList includes built-in pagination support, making it easy to handle data fetched from APIs:

<FlatList

hasMoreItems={hasMoreData}

loadMoreItems={fetchData}

/>

Scroll to Top Functionality

For long lists, you can implement a feature that allows users to scroll back to the top quickly:

<FlatList

scrollToTop={{

button: MyAwesomeScrollToTopButton,

offset: 150,

padding: 25,

position: "top right"

}}

/>

Conclusion

The FlatList component is an incredibly versatile tool for managing lists in React. It combines power, customization, and ease of use, making it ideal for building complex interfaces that handle various data operations.

For further insights, check out the following videos:

Explore how to use the FlatList component effectively in this tutorial.

This video demonstrates implementing FlatList with images and text.

YouTube Channel: Before Semicolon

Website: beforesemicolon.com