Listing Items in React Native

React Native is a fantastic way to get started with mobile development. It allows you to build fast mobile applications fairly quickly. In this blog post I will be covering one of the fundamentals of any applcaiton (web or moible), rendering out a list of items on to a screen using the FlatLists Component in React Native.

Setup

Before rendering the list I generated a new application using the expo cli in my terminal:

$ expo init ListDemo

Once this was complete I entered the new application and created a screens folder. Within that folder I also created a new file called List.js. I then used the View and Text componets to render a string.

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
const List = () => {
  return (
    <View>
      <Text>I should render a list!</Text>
    </View>
  )
}
styles = StyleSheet.create({
})
export default List

Lastly I imported the List.js sceen into my App.js file and replaced the started code with my List screen.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import List from './screens/List';
export default function App() {
  return (
    <View style={styles.container}>
      <List/>
    </View>
  )
}

Once the server is started you should see this:

Creating a List to Render

Before we can render a list we need to create one first. To keep it simple I am just created e a list of people and ages. In List.js We will create a variable called people which will be an array of objects with name and age key value pairs.

import React from 'react'
import { View, Text } from 'react-native'
const List = () => {
  const people = [
    {name: "Adam", age: "Age 24" }
    {name: "Beth", age: "Age 30" },
    {name: "Charlie", age: "Age 19" },
    {name: "David", age: "Age 28" },
    {name: "Emma", age: "Age 40" },
    {name: "Frank", age: "Age 39" },
    {name: "Greg", age: "Age 74" }
    {name: "Hal", age: "Age 35" },
    {name: "Isabel", age: "Age 26" },
    {name: "Jane", age: "Age 62" }
  ]
...
}

Now that I have a list it is time to render it on screen.

Rendering a FlatList

The first step to render the FlatList component is the same as any component. Import it! At the top of the List.js file add:

import { View, Text, StyleSheet, FlatList } from 'react-native'

Now that FlatList has been imported we can replace the Text component with a FlatList Component. Now if you are familiar with React your next insticnt may be to create a function that would map through the people array and create DOM element for each one, however things are a little different in React Native. The FlatList Component comes with a preset of props out of the box that allow us to render a list without creating a new funciton to do so. Out of these props the most important one’s to remember are: data, renderItem, item , and keyExtractor.

In FlatList the data prop is an array. In our example it will is our array of people. The renderItem prop is a callback function that takes in an item from data which it will use to render a newDOM element. For now that will be a Text component with the name and age of each person. Finally keyExtractor will create a unique key for each item in the list. From our example we will use a persons anem. Once we write it our List component should look something like this:

import React from 'react'
import { View, Text, FlatList, StyleSheet, SectionList } from 'react-native'
const List = () => {
  const people = [
      {name: "Adam", age: "Age 24" }
      {name: "Beth", age: "Age 30" },
      {name: "Charlie", age: "Age 19" },
      {name: "David", age: "Age 28" },
      {name: "Emma", age: "Age 40" },
      {name: "Frank", age: "Age 39" },
      {name: "Greg", age: "Age 74" }
      {name: "Hal", age: "Age 35" },
      {name: "Isabel", age: "Age 26" },
      {name: "Jane", age: "Age 62" }
  ]
  return (
    <View>
      <FlatList
        style={styles.list}
        data={people}
        keyExtractor= {person => person.name}
        renderItem={({item}) => 
          <Text> {item.name} - {item.age} </Text>}
      />
    </View>
  )
}
const styles = StyleSheet.create({
  list: {
    marginTop: 100
  }
})
export default List

A quick note here: I am adding a margin top of 100 here so that it displays a little clearer on a phone.

Once we save we should see something like this in our app:

Refactoring

Now that the list is rendering we could create an item component that would be responsible for rendering a single person from our people list. This is not really necessary in a project this small, however, if this were a larger app there could be a chance that we could reuse our items or list elsewhere. For that reason and to add alittle bit more style we are going to add a new component called Item.

To do so we will create a folder called components and wihtin that folder add the file Item.js. In that file we can render a functional component. Since we already know that we are rendering the name and age of each person we can use those as props form list to render them on screen with a Text component. Finally I am adding some styling to better show that it can be scrolled through.

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
const Item = ({name, age}) => {
  return (
    <View style={styles.item}>
      <Text style={styles.text} > {name} - {age} </Text>
    </View>
  )
}
const styles = StyleSheet.create({
  item: {
    backgroundColor: "blue",
    margin: 30
  },
  text: {
    fontSize: 32,
    color: "yellow"
  }
})
export default Item

Finally we can import this new component into List and update the renderItem callback.

import Item from '../components/Item'

...
renderItem={({item}) => <Item name={item.name} age={item.age}/>}

Conclusion

With taht we have rendered a list using ReactNatives FlatList Component. Thanks for reading!