How to add FlashList in React Native

It’s a known fact that the performance of FlatList slows down when you have a huge chunk of data. Shopify introduced an alternative to FlatList named FlashList which fixes the shortcomings of FlatList.

FlashList is fast and performant when compared to FlatList. It increases the performance in both Android and iOS platforms. After all, FlashList uses the similar FlatList props so that you don’t need to learn anything new.

You can install react native FlashList using the following command.

yarn add @shopify/flash-list

Execute the following command for the iOS platform.

cd ios && pod install

I will show a list of images in the following react native FlashList example. I use Pixabay API to obtain images and you must have a key to execute the API. Get the API key from here.

Following is the complete code to show a list of images using Pixabay API and FlashList.

import {StyleSheet, Image, View} from 'react-native';
import {FlashList} from '@shopify/flash-list';
import React, {useEffect, useState} from 'react';

const key = 'your_API_key';

const App = () => {
  useEffect(() => {
    callApi();
  }, []);

  const [data, setData] = useState('');

  const callApi = () => {
    fetch(
      `https://pixabay.com/api/?key=${key}&q=dogs&image_type=photo&per_page=100`,
    )
      .then(response => response.json())
      .then(json => setData(json.hits));
  };

  return (
    <View style={styles.container}>
      <FlashList
        data={data}
        renderItem={({item}) => (
          <Image style={styles.image} source={{uri: item.webformatURL}} />
        )}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: '80%',
    height: 200,
    margin: 20,
    alignSelf: 'center',
  },
});

Following is the output.

The above FlashList tutorial is pretty basic. FlashList has so many features, you may check out them through their official documentation.