Passing datas though Screens

📡 What you will learn

  • Read params from the route props.

👾 Before we start the exercise

👨‍🚀 Exercise 2

Navigating to another screens with params

Go to src/screens/StarshipFeedScreen.tsx:

  • The header title for this view should be Starships.
  • Update Routes.ts and Navigator.tsx to add a new screen called STARSHIP_DETAIL_SCREEN.
  • Implement handlePress function to send the user to STARSHIP_DETAIL_SCREEN, passing the starship data as parameters.

Create a details screen

  • Go and create src/screens/StarshipDetailsScreen.tsx:
react-navigation details screen

Each screen component in your app is provided with the route prop automatically.

  • Read the params of the screen and display the starship data.

You can use these component to make it pretty:

👽 Bonus

  • Change the screenOptions to display your screen as a modal.
  • Add a "close modal" Button with an icon.