⚠️ This lesson is retired and might contain outdated information.

Build a Github Repositories Component in React Native

Tyler McGinnis
InstructorTyler McGinnis
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 2 years ago

We'll walk through building a Repositories component which receives an array of repositories on Github and loops over those creating a list of React Native View components.

[00:00] In our components folder let's make a new file called repositories.js, require React native. We're also going to require a few more things. We have to use our badge we made as well, we're also going to require our separator we made, which is in our helpers folder. Restructuring to let's save some variables here. We have scrollview, we're going to use text, view, TouchableHighlight, and stylesheet.

[00:32] All of these we've used before. I'm going to drop in my styles right there. Now I'm going to create my repositories class which extends React component, then of course module.export = repositories. All right, so the very first thing we're going to do is specify what our UI will look like. We need to return this. We're going to have a scrollview and style is going to be styles.container again.

[01:01] We're going render the badge just as we did in the profiles component, and we're going to pass it this.props.userinfo. Now what we need to do is just like we did with our profile, we need to map over every repository and create basically an array of view components there so we can lay them out in our render method. So what we're going to do is I'm going to say repos, which is just coming in as a property whenever we first run our repositories component.

[01:37] Then I'm going to make a list again, which is mapping over the repos, so we get the item itself, or the repo, and the index, and not every repository has a description, so we're going to make a variable here called desc. We're going to say if repos.app.index has a .description property, then go ahead and make this variable text with a style of styles.description and whose text is repos.app.index.description, we close that. And if it's nothing, then we'll just render an empty view.

[02:17] We need to return something, so this is what we return is going to be the thing that our list array gets filled with. So what we want to fill it with, are these view components. Remember whenever you use map you have to have a unique key, so we have our view, and then we're going to have a nested view in here, with a style equal to styles.rowcontainer.

[02:41] Then we're going to use TouchableHighlight, and we're eventually going to create an onpress method, or function. The underlay color is just going to be transparent. So that's the component in here.

[02:54] Let's go ahead and nest a text that as a style of styles.name, and then what we want to show is the name property. That way when they click on the repositories name, it will go ahead and run this function right here. I'm going to leave this blank for now, we'll keep going on, because we'll get to that in a little bit. What I'm also going to have here is a text component, which is going to be the how many favorites they have, or how many favorites this specific repository has.

[03:31] Say repos.index and the property that GIthub uses is called stargazers_count. There we go, and if there's a description which we made up here, we're going to render that right here, and then of course we'll throw in our separator component we made.

[03:53] So this is looking pretty good so far. Down here we can throw in lists, and this will be every item that we've made that's in our repos array. So now the last thing we need to do is specify what happens when someone clicks on the repository's name. What we want to do is we're going to create a function called openpage and we need to pass it a few things.

[04:18] The first thing that you pass by, remember by is just creating a new function with the this context inside of that function being equal to whatever the first value you pass in is. So these are equivalent because we want the this keyword in openpage to reference the same this keyword as we're referencing right here. So we pass in this, then we can pass along any properties to it. I'm going to go ahead and pass it the HTML URL, or just the endpoint of where this specific repo is located.

[04:50] Now, let's go ahead and make this function. It's going to take in a URL, and then for now let's go ahead and just console.log what this URL is. Eventually what we're going to do is we're going to build a Web view component that allows us to whenever someone clicks on this TouchableHighlight button, we'll run this function and that will take us to the Web view, but since we haven't made that now, we're just going to console.log this for right now.

[05:16] The last thing I'm going to do, because you'll notice this repositories class or component is pretty reliant upon the user info again, and also for the repos, we're going to add some prop types to make sure that these are passed in when we use this component. So we're going to say userinfo proptypes, it's an object, or it needs to be an object, and it is required. Also repos, it's going to be an array, or it needs to be an array, and it is required.

JP
JP
~ 9 years ago

Great tutorial so far and I know this is a nit picky thing but I think a more intuitive way of doing repos.map((item, index) => { // and then referencing repos[index] inside your map function... });

would be to do this: repos.map((repo, index) => { // and then replace repos[index] with repo // so repo.description, repo.name, repo.html_url etc... });

John Davison
John Davison
~ 8 years ago

I find myself bristling at the statement 'whenever you use map you have to specify the key' which is such a misdirecting statement. Map is just a method that does something, key's provide a critical way for React to keep track of what is and what should be rendered in the DOM. That distinction shouldn't be trivialized.

Tyler McGinnis
Tyler McGinnisinstructor
~ 8 years ago

Hi John,

My teaching style for beginner focused lessons is to abstract many advanced topics. I agree with you that keys are very important in React, I disagree that a more in depth description was necessary for this video. I appreciate the feedback though and will try to make future videos less "hand wavy".

Bohdan Ganicky
Bohdan Ganicky
~ 8 years ago

I just wanted to say that it would be better to use some kind of proper id (e.g. the repository id) instead of map's index value (see https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) during the list item rendering.

~ 7 years ago

Since code are in es6, why not to use es6 "export default ClassName" instead of module.export=class?

Raunaq Sahni
Raunaq Sahni
~ 7 years ago

Agree with you here completely.

Markdown supported.
Become a member to join the discussionEnroll Today