React Native – FlatList
FlatList is used for rendering a scrollable list of items efficiently. It supports data-driven rendering and offers built-in optimizations for large lists.
Use Cases:
- Displaying lists of data such as contact lists, product lists, or chat messages.
- Rendering long lists with optimized performance.
Example:
import React from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';
const App = () => {
const data = [
{ key: 'Car' },
{ key: 'Dan' },
{ key: 'Dominic' },
{ key: 'Cat' },
{ key: 'Alexa' },
{ key: 'Joel' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Apple' },
{ key: 'Julie' },
];
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
export default App;