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 from data

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 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

• 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 Image source
  • You can download all the images here