React Native - ScrollView and FlatList

This lesson is part of a series on React Native.

Step 12 - ScrollViews and FlatLists

In news-api.js, change the pageSize param to 50 and then run the app.

You should see that the articles run off the page and out of view, and you can't scroll to them.

To fix this, You can wrap the articles in a ScrollView, update sports.jsx to look like this:

import { StyleSheet, Text, View, ScrollView } from 'react-native' ///////// Add ScrollView here
import { useEffect, useState } from 'react'
import { getNews } from '../../api/news-api'
import CustomView from '../../components/CustomScreen'
import Spacer from '../../components/Spacer'


const Sports = () => {

  const [articles, setArticles] = useState([])

  useEffect(() => {
    // Fetch sports news articles
    getNews('sports').then((sportsArticles) => {
      setArticles(sportsArticles)
    })
  }, [])

  return (  
    <CustomView style={{padding: 20}}>
      <ScrollView> //////////////////////////////////
      {articles.map((article, index) => (
        <View key={index}>
          <Text style={{width: '100%',textAlign: 'left'}}>{article.title}</Text>
          <Spacer height={10} />
        </View>
      ))}
      </ScrollView> ///////////////////////////////
    </CustomView>
  )
}

export default Sports

const styles = StyleSheet.create({})

There is a performance problem with the way we have things set up.

All the View, Text, and Spacer objects for every single article will be created even if you never scroll down to see them all.

This is a big performance hit on a small, battery-powered device like a phone.

FlatLists

If we use a FlatList, then only the components that are visible will be created. And as you scroll down, they will be created as needed (and the ones that scroll out of view will be destroyed).

Update sports.jsx to look like this:

import { StyleSheet, Text, View, FlatList } from 'react-native' //// REMOVE ScrollView from the imports,and add FlatList
import { useEffect, useState } from 'react'
import { getNews } from '../../api/news-api'
import CustomView from '../../components/CustomScreen'
import Spacer from '../../components/Spacer'

const Sports = () => {

  const [articles, setArticles] = useState([])

  useEffect(() => {
    // Fetch sports news articles
    getNews('sports').then((sportsArticles) => {
      setArticles(sportsArticles)
    })
  }, [])

  return (  
    <CustomView style={{padding: 20}}>
      
      ////////////////////////////// Use FlatList here, instead of ScrollView
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <View key={item.index}>
            <Text style={{width: '100%',textAlign: 'left'}}>{item.title}</Text>
            <Spacer height={10} />
          </View>
        )}
      />

    </CustomView>
  )
}

export default Sports

const styles = StyleSheet.create({})

Notes:

• A FlatList has a ScrollView built into it, so you don't need to wrap it in a ScrollView element.
• You set the data prop to the data that is to be fed into the FlatList (in this case it's the articles state variable - an array of 'article' objects)
• The renderItem prop is set to a function that returns the JSX for each item in the list
  • The item param passed into this function will be a single 'article' object.
  • You can use item.index to set the key prop for the root element that is returned by the function
• There's a lot more to FlatLists than what we covered here
• For more info on FlatList