Navigate to a React Native component

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

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.

[00:00] 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."

[00:19] 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.

[00:42] 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.

[00:57] 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.

[01:31] 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.

[01:44] 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.

[02:03] 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.

Marty
Marty
~ 7 years ago

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;

Rolando Barbella
Rolando Barbella
~ 6 years ago

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