New FlashList | React Native Tutorial 2022 | Code with Beto

In this video, I show you how to use FlashList, Shopify's open source library for React Native that improves performance when rendering long lists. I cover installation, configuration, and usage in Expo bare workflow and native projects.

If your app has many rows or sluggish FlatList performance, FlashList is a strong alternative. I also walk through item components and key props to optimize the list.

What's inside

Introduction to FlashList and its open source origins
Expo managed vs bare workflow for FlashList
Creating a project with Expo bare workflow
Installing FlashList and running the app
Building item components (TweetCard)
Basic FlashList usage with sample tweet data
The estimatedItemSize prop for better performance
Style tweaks and performance testing with Expo tools

Introduction to FlashList and its open source origins

FlashList is Shopify's open source library for superior list performance in React Native. It handles large datasets without hurting scroll smoothness and often outperforms FlatList.

I show comparative examples and the official FlashList docs. It is free, open, and ideal for timelines, feeds, and catalogs.

Expo managed vs bare workflow for FlashList

FlashList is not compatible with Expo's managed workflow, so you cannot use it directly in Expo Go. With Expo, use bare workflow or prebuild (bare).

That means building the native app to test, not only running in Expo Go. I explain how to pick the right workflow and recommend Expo's workflow docs for context.

Creating a project with Expo bare workflow

We create a new Expo bare workflow project with:

That generates android, ios, and expo folders like a native project. Then we open it in Visual Studio Code.

This step is required because the managed workflow does not support FlashList.

Installing FlashList and running the app

Install FlashList with:

Run on iOS or Android with:

These commands build and launch the app on a simulator or device so you can test FlashList properly.

I also covers port conflicts and waiting for the build to finish.

Building item components (TweetCard)

We create a TweetCard component that takes author, text, and image props for each tweet. It is simple, reusable, and styled for text and images.

TweetCard is passed as renderItem to FlashList so each row stays organized and easy to customize.

Basic FlashList usage with sample tweet data

We import a large tweets array with author, text, retweets, and favorites and pass it to FlashList via the prop.

renderItem receives each item and passes it to TweetCard with the spread operator. We add basic container styles with .

That shows how FlashList renders long lists with solid performance.

The estimatedItemSize prop for better performance

FlashList recommends , an approximate row height in pixels. It helps FlashList optimize memory and rendering.

In the tutorial I use 200, but adjust it to match your item layout. Without it, FlashList warns you and performance can suffer.

Style tweaks and performance testing with Expo tools

We add background color and vertical padding to the FlashList container. I also show opening Expo dev tools with Control + M to enable the Performance Monitor.

That confirms the list renders quickly without dropped frames and that FlashList improves long-list performance.

Resources

CourseReact Native course

React Native fundamentals and practical patterns for building native apps.

Let's connect!