React Native Foundation

What you will learn

  • Add a simple ScrollView
  • Add a performant Scroll for long lists with FlatList

👾 Before we start the exercise

👨‍🚀 Exercise 3

  • Create a new file ./src/screens/TermsScreen.tsx paste the content from this TermsScreen
  • Fix the View bug with a ScrollView because it can't display all the content.

🛰 This is an important feature to display simple content. But there is another way to display lists.

  • Create a new file ./src/screens/FeedScreen.tsx and paste the content from this FeedScreen
  • Run from your terminal to download dummy data on your computer.
curl https://swapi.dev/api/starships/ > data.ts

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

  • Create an exported variable on data.ts
export const data = {
  "count": 36,
  ...
}

You should have a "stringifyied" version of the data

json preview

  • Implement a FlatList for the data that is fetched.
    • Add some dummy data with data={data.results}
    • Render Item with name, model, crew, hyperdrive_rating and cost_in_credits

👽 Bonus