Render a list of data

📡 What you will learn

  • Add a performant Scroll for long lists with <FlatList>

👾 Before we start the exercise

Repository name: spacecraft

Description: A React Native application build with expo. Created during my bootcamp https://davidl.fr/bootcamp

  • ❗ Commit your work if it's not already done.
  • Push your code to GitHub.

👨‍🚀 Exercise 4

Download dummy data on you computer

  • Run a curl from your terminal to download dummy data on your computer.
mkdir api
curl https://swapi.py4e.com/api/starships/ > api/data.json

⚠️ For Windows users you can copy/paste this file.


We will use JSON.stringify() here to render a string version of the data

  • Create a new file ./src/screens/StarshipFeedScreen.tsx and paste the content from this StarshipFeedScreen
  • Uncomment the lines and to display the array results from data

Here is a preview of what you should have:

a preview of a React Native app with raw data

Render a list of data with FlatList

Implement a FlatList for the data that is fetched.

  • Read the FlatList documentation.
  • Add your array to the props data
  • Render Item with name, model, crew, hyperdrive_rating and cost_in_credits
  • If you want to add an Image just use this api to generate random images https://api.lorem.space/image/car

👽 Bonus