Build a React Native App using Expo - FlatList, ListItem and detail screen Part 3

12/07/2020   by Luciana Sato

In this tutorial, I'll demonstrate how to use the FlatList Component in your React Native app. You can check the documentation in:

https://reactnative.dev/docs/flatlist

You can watch the tutorial in the video below:

The image below, you can see the result of this tutorial:

React Native App - FlatList

At this time, we don't have an API to get the locations. So, in this part of the tutorial, I'm going to fake the responses.

1) Create the fake response:

In the screen/MapListScreen.js you can add the fake response as a json structure. Add an array of elements using the ID and the name of the location that you want to show in the FlatList (for now, you just need the ID and the TITLE).

2) Install the react-native-elements using the command below:

expo install react-native-elements

This library is needed for the ListItem. The FlatList contains the ListItem.

3) Create the fake response, import the FlatList, ListItem and TouchableOpacity

The TouchableOpacity is important for the navigation into the ScreenDetail when touched in the element of the FlatList.

The result of the steps above is:

  import React from 'react'
  import { SafeAreaView } from 'react-navigation'
  import { Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native'
  import Icon from 'react-native-vector-icons/Ionicons'
  import { ListItem } from 'react-native-elements'
  
  const response = [
    {
      id: '1',
      title: 'Cuiabá'
    },
    {
      id: '2',
      title: 'Campo Grande'
    },
    {
      id: '3',
      title: 'São Paulo'
    },
    {
      id: '4',
      title: 'Rio de Janeiro'
    },
    {
      id: '5',
      title: 'Ceará'
    },
    {
      id: '6',
      title: 'Rio Grande do Sul',
    },
    {
      id: '7',
      title: 'Acre'
    },
  ]
  
  const MapListScreen = ({ navigation }) => {
    return (
      <>
        <SafeAreaView style={ styles.container } forceInset={{ top: 'always' }}>
          <FlatList 
            data={ response }
            keyExtractor={ item => item.id }
            renderItem={({ item }) => {
              return (
                <TouchableOpacity
                  onPress={() => 
                    navigation.navigate('MapDetail', {_id: item.id})
                }>
                  <ListItem chevron title={ item.title } />
              </TouchableOpacity>
              )
            }}
          />
        </SafeAreaView>
      </>
    )
  }
  
  MapListScreen.navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-list" color={ tintColor } size={ 30 } />
    )
  }
  
  const styles = StyleSheet.create({
    container: {
      margin: 4,
      padding: 30
    }
  })
  
  export default MapListScreen

4) Create the file src/MapDetailScreen.js

This screen will be called when touch on an element of the list. Call the MapDetail in the MapListSreen using the onPress function.

  import React from 'react'
  import { Text, StyleSheet, Dimensions } from 'react-native'
  
  const MapDetailScreen = ({ navigation }) => {
    const _id = navigation.getParam('_id')
    return (
      <>
        <Text style={{ fontSize: 48 }}>Item {_id}</Text>
      </>
    )
  }
  
  export default MapDetailScreen

5) Install react-navigation-stack using the command:

expo install react-navigation-stack

This is useful because:

Provides a way for your app to transition between screens where each new screen is placed on top of a stack.

You can see the documentation in:

https://reactnavigation.org/docs/stack-navigator/

6) Configure the react-navigation-stack in the App.js file.

  import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { createAppContainer, createSwitchNavigator } from 'react-navigation'
  import { createBottomTabNavigator } from 'react-navigation-tabs'
  import { createStackNavigator } from 'react-navigation-stack'
  import MapScreen from './src/screens/MapScreen'
  import MapListScreen from './src/screens/MapListScreen'
  import MapDetailScreen from './src/screens/MapDetailScreen'
  import { setNavigator } from './src/navigationRef'
  import Icon from 'react-native-vector-icons/Ionicons'
  
  const mapListFlow = createStackNavigator({
    MapList: MapListScreen,
    MapDetail: MapDetailScreen
  })
  
  mapListFlow.navigationOptions = {
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-list" color={ tintColor } size={ 30 } />
    )
  }
  
  const switchNavigator = createSwitchNavigator({
    mainFlow: createBottomTabNavigator({
      MapView: MapScreen,
      mapListFlow
    }, {
      tabBarOptions: {
        showLabel: false,
        activeTintColor: '#3D8836'
      }
    })
  })
  
  const App = createAppContainer(switchNavigator)
  
  export default () => {
    return (
      <App 
        ref={navigator => {
          setNavigator(navigator)
        }}
      />
    );
  }

In the next tutorial, you will learn how to show a image in the FlatList.

See you