FlatList | React Native Component Explained

React Native FlatList Example
React Native FlatList

Let’s code the FlatList

export default function App() {const animals = [{id: 1,name: 'Shark',},{id: 2,name: 'Herring',},{id: 3,name: 'Lion',},{id: 4,name: 'Polar Bear',},{id: 5,name: 'Penguin',},{id: 6,name: 'Parrot',},];
return (<View><Text>Open up App.js to start working on your app!</Text></View>);}
...
const oneAnimal = ({ item }) => (
<View><Text>{item.name}</Text></View>);return (<View><FlatListdata = { animals }renderItem = { oneAnimal }/></View>);}

Even more props!

...headerComponent = () => {return <Text style={ styles.listHeadline }>Animals</Text>}
return (
<View><FlatListListHeaderComponent={ headerComponent }data = { animals }renderItem = { oneAnimal }/></View>);

There are props all over!

Dude, your list is fugly..

...
return (
<SafeAreaView style={ styles.container }><FlatListListHeaderComponentStyle = { styles.listHeader }ListHeaderComponent={ headerComponent }data = { animals }renderItem = { oneAnimal }/></SafeAreaView>);}const styles = StyleSheet.create({container: {flex: 1,marginHorizontal: 21,},listHeader: {height: 55,alignItems: ‘center’,justifyContent: ‘center’,
marginBottom: 8,
borderBottomWidth: 1,borderBottomColor: '#7B52AB',},listHeadline: {color: ‘#333’,fontWeight: ‘bold’,fontSize: 21,},listHeadlineSeparator: {width: 100,height: 100,borderBottomWidth :5,borderBottomColor: '#000',},});
...
const oneAnimal = ({ item }) => (
<View style={ styles.item }><View style={ styles.avatarContainer }><Image source={ item.image } style={ styles.avatar } /></View><Text style={ styles.name }>{item.name}</Text></View>);const styles = StyleSheet.create({...item: {flex: 1,flexDirection: ‘row’,alignItems: ‘center’,paddingVertical: 13,},avatarContainer: {backgroundColor: ‘#D9D9D9’,borderRadius: 100,height: 89,width: 89,justifyContent: ‘center’,alignItems: ‘center’,},avatar: {height: 55,width: 55,},name: {fontWeight: ‘600’,fontSize: 16,marginLeft: 13,},separator: {height: 1,width: ‘100%’,backgroundColor: ‘#CCC’,},});
...
listSeparator = () => {
return <View style={ styles.separator } />}...
<FlatList
ListHeaderComponentStyle = { styles.listHeader }ListHeaderComponent = { headerComponent }data = { animals }renderItem = { oneAnimal }ItemSeparatorComponent = { listSeparator }/>...
const styles = StyleSheet.create({
separator: {
height: 1,width: '100%',backgroundColor: '#CCC',},});

The entire code

When to use FlatList

Code Away!

--

--

--

Hello, Nice to meet you! https://kasperkloster.dk/en

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Give your users more freedom with data grid row grouping

JavaScript Promise combinators: race, all, allSettled, any — Wisdom Geek

5 techniques for Front-end unit testing with Jest and Enzyme

Tiny Components: What Can Go Wrong?

Deno FrontEnd Server how to start a server by Aleph.js

What are the basic data types in Typescript?

Redux without switch-cases (and some other tips)

Introducing JavaScript Devslopes Style

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kasper Kloster

Kasper Kloster

Hello, Nice to meet you! https://kasperkloster.dk/en

More from Medium

React Native: Initial Lessons

How Different is React Native from ReactJS?

The Best Video Player Library for React Native Apps — Part 1

Testing Axios async hook in React native with react-hooks