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

Tracking Tintin’s Whereabouts with Mapbox and React

How to scrape Google Scholar organic results with Node.js

How to Solve SEO Problem in Your React Application -Exon Apps

A simple Introduction to Redux!

First impressions with GraphQL

HackerRank 10 Days of JavaScript problem and solution

Understanding async-await in JavaScript

Redux: A Basic Introduction

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

Using SharedPreference to store tokens with react native.

React-Navigation Gradient Background

Swipe Navigation on React Native

React Native: How To Navigate Between Screens