Render a list of data
📡 What you will learn
- Add a performant Scroll for long lists with
<FlatList>
👾 Before we start the exercise
- Open repo.new and create a new repo
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
fromdata
Here is a preview of what you should have:

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
withname
,model
,crew
,hyperdrive_rating
andcost_in_credits
- If you want to add an
Image
just use this api to generate random imageshttps://api.lorem.space/image/car
👽 Bonus
- Use a Card to render items
- On each
Card
display a local Image- You will need to use
require("../../assets/starships/imagename.jpg")
for the Imagesource
- You can download all the images here
- You will need to use