This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Native: Navigate to the Repositories component

2:36 React lesson by

Now that we've created the React Native component for our repositories view, we still need to wire it into the routing so that we can visit its view.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Now that we've created the React Native component for our repositories view, we still need to wire it into the routing so that we can visit its view.

Avatar
Marty

When I went to test, I got the following error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of NavigatorIOS.

I got same error in #6 React Native: Passing data when changing routes.

In Repositories.js the last line should be:
module.exports = Repositories;

I had it as:
module.export = Repositories;

Avatar
Rolando

I'm getting this error

index.android.bundle:28678Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Repositories`.

plus

Possible Unhandled Promise Rejection (id: 1):
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Repositories`.

Anyone that can help? please

You'll remember earlier when we created our dashboard, we had a "Go to Profile" function, a "Go to Repos" function, and a "Go to Notes" function. Each of these were invoked when a user pressed on a certain button. Because we didn't have the repositories component finished, we just logged, "Go to," and it should be "repos."

What we're going to do now is, instead of just logging that, let's actually take the user to the repositories component. The title, let's call it "Repos." The data we're going to pass in, in a repositories component, we're expecting to receive user info. We're also expecting to receive some repos, as well.

When we made our API, we made this "Get Repos" method. All it did was it used "Fetched" to go and grab the user's GitHub repos. Then, it returns that promise.

What we should be able to do now is, inside of our "Go to Repos" function, let's go ahead and first let's require API. We're in dashboard, so we're going to go back one, into utils, and get API. Now what we can do is api.getrepos, and we're going to pass it this.props.userinfo.login. This is going to be the username of the GitHub user that we're dealing with.

Then, remember, that will return a promise. We're going to have a .then. We're going to use the sx fat arrow. We're going to get this response back from our promise.

When all the data gets back, when it gets parsed to JSON, we're then going to call this function, which will go and change routes. We're going to pass it "User Info. We're also going to pass it "Our Repos." That'll be the response that we got.

Now, let's verify that everything's working. If we come here, type any username, then go to "View Repos," it does not seem to be working. We forgot to require repositories. I'm going to require that right now. Now, if we go back, let's see if this works now. There we go. There's all the repositories.

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