website/index.html

---
appname: FlashList
---

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>{{page.appname}} – fast and performant React Native list</title>
    <meta name="description"
        content="Creating a performant list in React Native is not easy. But with FlashList, you get incredible performance using the familiar React Native FlatList's API." />
    <link rel="stylesheet" href="css/styles.css?{{site.time | date: '%s'}}" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡️</text></svg>">
    <meta property="og:title" content="FlashList - super fast list for react native" />
    <meta property="og:type" content="website">
    <meta property="og:description"
        content="FlashList is a faster alternative to FlatList with a similar API. Migrate in a few seconds and get major performance boost." />
    <meta property="og:image" content="https://shopify.github.io/flash-list/img/social-share.png" />
    <meta property="og:url" content="https://shopify.github.io/flash-list/">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="shopify.github.io">
    <meta property="twitter:url" content="https://shopify.github.io/flash-list/">
    <meta name="twitter:title" content="FlashList - super fast list for react native">
    <meta name="twitter:description"
        content="FlashList is a faster alternative to FlatList with a similar API. Migrate in a few seconds and get major performance boost.">
    <meta name="twitter:image" content="https://shopify.github.io/flash-list/img/social-share.png">
</head>

<body>
    <div class="content">
        <div class="topbar">
            <h1>⚡️ {{page.appname}}</h1>
            <div class="social-buttons"">
            <a class=" github-button" href="https://github.com/shopify/flash-list"
                data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
                data-show-count="true" aria-label="Github shopify/flash-list on GitHub">Github</a>
                <a href="https://discord.gg/k2gzABTfav">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 16 16">
                        <path
                            d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
                    </svg>
                </a>
            </div>
        </div>
        <div class="header">
            <h2>Fast & Performant <br> React Native List</h2>
            <p class="subtitle">No more blank cells</p>
            <p class="claim">
                Swap from FlatList in seconds. Get instant performance.
            </p>
            <div class="row eight">
                <a class="button primary" href="#install">Install {{page.appname}}</a>
                <a class="button secondary" target="_blank" href="docs/">Read the documentation</a>
            </div>
        </div>
        <div class="section black half">
            <div class="info">
                <h1>
                    Similar props.<br />Instant performance.
                </h1>
                <p>
                    Even with the similar props as the React Native FlatList, {{page.appname}} recycles components
                    under the hood
                    to maximize performance.
                </p>
            </div>
            {% highlight tsx %}{% include snippet1.js %} {% endhighlight %}
        </div>
        <div class="section half">
            <h1>Exceptional performance on low-end devices</h1>
            <div>
                <div class="metric-section">
                    <h2>FPS* in UI Thread</h2>
                    <div class="column full">
                        <div class="graph">
                            <div class="row end">
                                <span class="progress bar hundred"></span>
                                <h2>up to 5x</h2>
                            </div>
                            <h3>{{page.appname}}</h3>
                        </div>
                        <div class="graph">
                            <div class="row gray center">
                                <span class="progress bar twenty"></span>
                            </div>
                            <h3 class="gray">React Native FlatList</h3>
                        </div>
                    </div>
                </div>
                <div class="metric-section">
                    <h2>FPS* in JS Thread</h2>
                    <div class="column full">
                        <div class="graph">
                            <div class="row end">
                                <span class="progress bar hundred"></span>
                                <h2>up to 10x</h2>
                            </div>
                            <h3>{{page.appname}}</h3>
                        </div>
                        <div>
                            <div class="row graph gray end">
                                <span class="progress bar ten"></span>
                            </div>
                            <h3 class="gray">React Native FlatList</h3>
                        </div>
                    </div>
                    <p class="note">* Average FPS on a 60FPS screen Android Moto G10 device. (Higher is better) </p>
                </div>
            </div>
        </div>

        {% for section in site.data.sections %}
        {% assign isEven = forloop.index | modulo: 2 | contains: 1 %}
        {% include section.html title=section.title description=section.description image=section.image
        video=section.video isEven=isEven code=section.code alt=section.alt %}
        {% endfor %}

        <div class="section casestudy">
            <div class="info">
                <h2>Learn how and why <span class="shopify">Shopify</span> uses {{page.appname}} to
                    make <span class="mission">commerce better
                        for everyone.</span>
                </h2>
                <a class="button secondary" target="_blank"
                    href="https://shopify.engineering/instant-performance-upgrade-flatlist-flashlist">Read it now</a>
            </div>
            <img src="img/commerce-better-for-everyone.png"
                alt="Shopify uses FlashList to make commerce better for everyone" />
        </div>

        <div class="section fullwidth">
            <div class="info">
                <h1>See what people say about FlashList</h1>
            </div>
            <div class="tweets">
                {% for tweet in site.data.tweets %}
                <div class="tweet">
                    {% twitter tweet theme="dark" %}
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="section fullwidth">
            <div class="info">
                <h1>FlashList in public</h1>
                <h2>Past Events</h2>
            </div>
        </div>
        <div class="section half">
            <img style="max-height: 350px" src="img/RNR-Radio.jpg" alt="FlashList on the React Advanced London Meetup">
            <div class="info">
                <h2>React Native Radio Podcast</h2>
                <p class="date">Aug 27th, 2022</p>
                <p>
                    Talha Naqvi from Shopify went on React Native Radio to talk about the hot new FlashList and why
                    it's a drop-in replacement for FlatList in most cases.
                </p>
                <a target="_blank"
                    href="https://reactnativeradio.com/episodes/rnr-245-shopifys-flashlist-with-talha-naqvi">
                    Listen to the podcast
                </a>
            </div>
        </div>
        <div class="section half">
            <div class="info">
                <h2>React Native EU Conference 2022</h2>
                <p class="date">Sep 2, 2022</p>
                <p>
                    Marek Fořt presented FlashList at the React Native EU Conference 2022. He demoed how to migrate from
                    FlashList and gave tips on how to get the best performance out of it.
                </p>
            </div>
            <div class="conference">
                <iframe width="100%" height="auto" src="https://www.youtube.com/embed/BrYxGrE9sW8"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
        </div>
        <div class="section half">
            <div class="conference">
                <iframe src="https://www.youtube.com/embed/l2-nR_neb9Y?start=644" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
            <div class="info">
                <h2>App.js conf</h2>
                <p class="date">Jun 9th, 2022</p>
                <p>
                    We introduced FlashList on the App.js conf while talking about the React Native open-source projects
                    we have at Shopify.
                </p>
            </div>
        </div>
        <div class="section half">
            <div class="info">
                <h2>React Advanced London Meetup</h2>
                <p class="date">Sep 28nd, 2022</p>
                <p>
                    Siavash Etemadieh presented FlashList on the React Advanced London Meetup. We will post the
                    recording once it's available.
                </p>
            </div>
            <img src="img/london-meetup.jpg" alt="FlashList on the React Advanced London Meetup">
        </div>

        <div class="section fullwidth" id="install">
            <div class="info">
                <h1>Install now</h1>
                <p>Try it in your project now:</p>
            </div>
            <div class="row">
                <div class="column">
                    <h3>React Native</h3>
                    {% highlight bash linedivs %}{% include install.sh %}{% endhighlight %}
                </div>
                <div class="column">
                    <h3>Expo</h3>
                    {% highlight bash linedivs %}{% include install_expo.sh %}{% endhighlight %}
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <img id="shopifylogo" src="img/shopify.png" alt="">
    </div>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
</body>

</htm25l