Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@shopify/flash-list
Advanced tools
@shopify/flash-list is a high-performance list component for React Native, designed to handle large datasets efficiently. It provides smooth scrolling and optimized rendering, making it suitable for applications that require handling extensive lists of data.
Basic Usage
This code demonstrates the basic usage of the FlashList component to render a simple list of items.
import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text } from 'react-native';
const data = [
{ key: '1', name: 'Item 1' },
{ key: '2', name: 'Item 2' },
{ key: '3', name: 'Item 3' }
];
const App = () => (
<FlashList
data={data}
renderItem={({ item }) => (
<View>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={item => item.key}
/>
);
export default App;
Custom Item Layout
This code demonstrates how to customize the layout of each item in the FlashList component using styles.
import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const data = [
{ key: '1', name: 'Item 1' },
{ key: '2', name: 'Item 2' },
{ key: '3', name: 'Item 3' }
];
const App = () => (
<FlashList
data={data}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<Text style={styles.itemText}>{item.name}</Text>
</View>
)}
keyExtractor={item => item.key}
/>
);
const styles = StyleSheet.create({
itemContainer: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: '#ccc'
},
itemText: {
fontSize: 18
}
});
export default App;
Handling Large Datasets
This code demonstrates how to use the FlashList component to handle and render a large dataset efficiently.
import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text } from 'react-native';
const data = Array.from({ length: 1000 }, (_, index) => ({ key: String(index), name: `Item ${index}` }));
const App = () => (
<FlashList
data={data}
renderItem={({ item }) => (
<View>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={item => item.key}
/>
);
export default App;
react-native-recyclerview-list is a high-performance list component for React Native that leverages the RecyclerView from Android. It is designed to handle large datasets efficiently, similar to @shopify/flash-list. However, it is more Android-centric and may not provide the same level of performance on iOS.
react-native-virtualized-view is another package designed to handle large lists efficiently in React Native. It provides a virtualized list view that only renders items that are currently visible on the screen, similar to @shopify/flash-list. However, it may require more configuration and customization to achieve optimal performance.
react-native-largelist is a high-performance list component for React Native that is optimized for handling large datasets. It provides smooth scrolling and efficient rendering, similar to @shopify/flash-list. However, it may have a steeper learning curve and require more effort to integrate into an existing project.
Fast & performant React Native list. No more blank cells.
Swap from FlatList in seconds. Get instant performance.
Add the package to your project via yarn add @shopify/flash-list
and run pod install
in the ios
directory.
We recommend reading the detailed documentation for using FlashList
here.
But if you are familiar with FlatList, you already know how to use FlashList
. You can try out FlashList
by changing the component name and adding the estimatedItemSize
prop or refer to the example below:
import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";
const DATA = [
{
title: "First Item",
},
{
title: "Second Item",
},
];
const MyList = () => {
return (
<FlashList
data={DATA}
renderItem={({ item }) => <Text>{item.title}</Text>}
estimatedItemSize={200}
/>
);
};
To avoid common pitfalls, you can also follow these steps for migrating from FlatList
, based on our own experiences:
FlatList
to FlashList
and render the list once. You should see a warning about missing estimatedItemSize
and a suggestion. Set this value as the prop directly.renderItem
hierarchy for explicit key
prop definitions and remove them. If you’re doing a .map()
use indices as keys.renderItem
hierarchy for components that make use of useState
and verify whether that state would need to be reset if a different item is passed to that component (see Recycling)FlashList
using getItemType
prop to improve performance.FlashList
can appear slower while in dev mode due to a small render buffer.The fixture is an example app showing how to use the library.
[1.6.3] - 2023-11-09
FAQs
FlashList is a more performant FlatList replacement
The npm package @shopify/flash-list receives a total of 202,787 weekly downloads. As such, @shopify/flash-list popularity was classified as popular.
We found that @shopify/flash-list demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 24 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.