Build a Github Repositories Component in React Native

[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.