FlatList in React Native
2 min readFeb 13, 2023
What is FlatList?
FlatList is a fundamental component on react native which load a list of similar structured data.
Difference between ScrollView vs FlatList?
ScrollView renders the enter item even if the item is not visible on the screen which affects performance and takes large amount of memory but FlatList will render item only if its visible on the screen , which is ahead in performance when compared to ScrollView.
Props of FlatList:
So there are two required props for FlatList
1.data -> which holds the data source.
2.renderItem -> which take an single item from the list and render it.
Example of FlatList:
import React, { useState } from 'react';
import {SafeAreaView, StyleSheet, TextInput, View, Text, FlatList, ScrollView, Alert, Platform, TouchableOpacity, TouchableNativeFeedback, TouchableHighlight} from 'react-native';
const App = () => {
const [name, setName] = useState([
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
])
return (
<SafeAreaView>
<View style={styles.viewScreen}>
< FlatList
data={name}
renderItem = {({item, index}) => (
<View style={styles.viewScreen}>
<Text>{item.name}</Text>
</View>
)}
>
</FlatList>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
appButtonContainer: {
elevation: 5,
width: '80%',
backgroundColor: "#009688",
borderRadius: 5,
padding: 10,
alignContent:'center',
justifyContent: 'center'
},
viewScreen: {
justifyContent: 'center',
alignItems: 'center',
padding: 30,
flexDirection: 'row',
gap:10
}
});
export default App;Output:
