Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Pass Data Between Screens when Navigating with StackNavigator

    Chris AchardChris Achard
    react-nativeReact Native

    Once navigation is setup, we’ll pass data between screens using params.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: In restaurantrow.js, where we're calling navigate, we can pass params as a second argument. In particular here, we can pass the restaurant object that is in our props in as the place key.

    Then in restaurantinfo.js, we can put a debug in the render and see that the place object is being passed under, and we can access it there directly.

    We can also see a get param function which is another option to access the param. In restaurantinfo.js, let's start with the first option by extracting the place from the params. Unfortunately, this params will be null if no params are passed. We need to check for null first, which works, but it's long and cumbersome.

    We can do the second option, which is to use the get param function, which automatically checks for null params. When we've done that, we can see the local place variable, which is filled with the restaurant info.

    Let's take that info and show it on the screen. First by importing what we need, then by building up the component, and finally, by adding the styles that we need. Now when we reload, each info button passes the restaurant data onto the info page and displays the proper info.