Skip to content

02.md

Latest commit

 

History

History
51 lines (29 loc) · 1.94 KB

02.md

File metadata and controls

51 lines (29 loc) · 1.94 KB

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

Modal

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

Debugging

  • Add expo-dev-tools to your project
  • Look with the expo-dev-tools the route and params of the screen.

Start the project with and open the expo-dev-tools with ? and shift + m in your terminal to open the menu and select @dev-plugins/react-navigation.

Now you can navigate in your app and see the route and params of the screen.