This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Native: Passing data when changing routes

2:51 React lesson by

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

Avatar
Eduardo

hey guys,

in the video is missing the moment when we required the "Dashboard.js" in the top "Main.js" file,

// Main.js file
var React = require('react-native');
var api = require('../Utils/api');
var Dashboard = require('./Dashboard');

E

Avatar
Tyler

Good catch! Not sure why that's not shown.

In reply to Eduardo
Avatar
Marty

When Tyler shows the "This is the dashboard" screen in the simulator, I tried to duplicate it and got an error similar to something like:
Invariant Violation string expected but object received. Check the render method of NavigatorIOS.

That's not the exact wording but close. I'm unable to replicate it, but copying Main.js and Dashboard.js from github fixed the issue.

Avatar
Brendan

I'm getting the following error message:
Invariant Violation: Objects are not valid as a React child (found: object with keys{ --keys here-- }. If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text.

I've been trying various solutions, and looking for answers but haven't come up with anything yet. Also, I noticed someone had a similar issue a few months ago and copied the Main and Dashboard files from GitHub and it fixed the issue, however I tried that and had no luck.

Any idea on why this is happening?

Avatar
Gunars

I have exactly the same issue. Got the same error message.
Seems it's related with {this.props.userInfo} , because when I'm removing from Dashboard.js, there is no error message.

In reply to Brendan
Avatar
ephemera

I was getting the following error too:
2016-01-04 16:55:42.062 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Objects are not valid as a React child (found: object with keys {login, id, avatarurl, gravatarid, url, htmlurl, followersurl, followingurl, gistsurl, starredurl, subscriptionsurl, organizationsurl, reposurl, eventsurl, receivedeventsurl, type, siteadmin, name, company, blog, location, email, hireable, bio, publicrepos, publicgists, followers, following, createdat, updatedat}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text.
2016-01-04 16:55:42.093 [warn][tid:main][RCTNavigator.m:507] Cannot adjust current top of stack beyond available views

I believe this is due to Text not being able to render an object as text. Changing
{this.props.userInfo} to {JSON.stringify(this.props.userInfo)} should fix it

In reply to Brendan
Avatar
Tyler

Yup this is a new change to React as of .14 I believe. As you mentioned, JSON.stringify will fix it.

In reply to ephemera
Avatar
Tiago

For those trying to follow this using Navigator instead of NavigatorIOS, I use the following renderScene function:

renderScene={(route, navigator) => {
          return <route.component {...route.passProps} navigator={navigator} />;
        }}

This way your code looks pretty much like the one for NavigatorIOS

Avatar
Dorian

I'm having Possible Unhandled Promise rejection(id: 0) when I try to search for user. Some hints here? I'm using the Navigator rather than NavigatorIOS.

In reply to Tiago
Avatar
Edgar

Had the same problem brotha, glad to see I wasn't the only one! See you at the office :-D

In reply to Brendan

A dashboard component, there's the image of the user, there's also a view profile button, a view repositories button, and take notes button. All of these will go to these different routes, which we'll build later on.

The first thing we need to do is actually build our dashboard component. Let's go to our components file, and create a new file called dashboard.js. Then, just the usual, we're going to require react natives. We're going to the structural object, which will allow us to get the text component and the view component.

We'll need a few more, but we'll get those later. Then, we're going to go into create a class called dashboard, which extends react component.

I always like to do modular exports immediately because I find that's something I always forget. I do that right away so I don't forget that. Inside of render, we're going to return what we want the UI to look like.

Let's just set it "be a view for now," with some text inside of it. I'm going to go ahead and add some style to this immediately, you'll notice we are using style sheets so we'll have to get that in here as well.

Then, what we'll do is this view we're going to give a style of styles.container, which is defined right here.

Let's see if this works best. Now what should happen is when we click on " [inaudible 01:39] submitter," when we click on this button, [inaudible 01:42] should run. It should make a request to get some GitHub data.

When that data is back, we should go to this new route, which is our dashboard route. Let's see if everything is working.

Type in a username, there we go, this is the dashboard, perfect. One thing we also want to check and you'll notice here is when we initially started first talking about react, we talked about how it was really good at managing state because each component manages its own state and each component can pass any data or even its state down to child's components.

Notice here, when we go to this new route, when we go to this dashboard, we have this response so we're passing in as a property to the dashboard component, what we can do here in dashboard now is in order to access the property we passed in, we're going to do this.props.userinfo.

What this will do is this should be the data from GitHub that we should see rendered. It'll be at jSON, but it will get the point across that we have some data coming from GitHub, let's see if this works now. There we go, there's our data.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?