Set up Basic iOS Routing with React Native

[00:00] What you can do with this app that we'll build is you can enter in someone's GitHub username. You'll see their image. Then what you can do is you can view their profile, some things about them like their email address, their repos, and other things about their GitHub profile.

[00:16] Then what you can do is you can view all their repositories where you'll see a list of their repository names as well as how many stars each one has and a short description. You'll be able to click on that and see a nice web view. Then what you're also able to do if you wanted to take notes about this person, you can do that right here.

[00:37] What I like about this app as a demo app is that it will demonstrate a lot of the things that we'll do every day when we're building these apps. For example, we'll do a lot of routing in this app. We'll do some network requests. We'll update, and we'll need to link that out to the screen. A lot of these things that we'll learn in this app we'll be able to take and apply to basically every other app we build.

[01:01] The first React Native component we're going to be talking about is NavigatorIOS. What NavigatorIOS allows us to do is, inside of our main component, if we drop it in here, it allows us to add an initial route property to our component. Notice we specify a component, a title, and any properties we want to pass to it.

[01:26] Whenever our main component is rendered, it will render this NavigatorIOS component which will then go and render my view. Then inside of my view what we're allowed to do is we're allowed to treat our navigation or our routing almost like it's an array, like we're pushing and popping from it.

[01:45] If I had some button where I wanted to go to a new view, all I would do is this.props.navigator.push and then my next component I want to take it to.

[01:55] Let's go and add NavigatorIOS to our main component. Let's also make it so when our initial component loads, we'll also load another component which we'll also create.

[02:08] Coming over to our code, let's go ahead and take out all this stuff. What I also need to do is whenever you use a new component, you need to make sure that you include it up here. We're going to include NavigatorIOS. Now, what I'm going to return is that component with a few properties.

[02:30] Our initial route is going to have a title of GitHub Note Taker. Then the component we're going to render for the initial route is going to be our main component. We haven't made that yet, so we'll go and do that right now.

[02:53] Let's create a new folder called app. Inside of this folder is where we'll have all of our JavaScript files. In here, let's create another folder called components. Then inside of here, we'll make a new file called main.js. This main.js file, again, will be file that gets rendered. It will be basically the initial component that gets rendered, but it will also include routing.

[03:23] The very first thing is we're going to require React Native. Then what we're going to do is create a class called main which extends React.component. I'm going to capitalize that. Then our render method, what we're going to return, is a view with some text inside of it that just says, "Testing the router."

[04:00] What's going to happen if we try to run this right now is it's going to say, "Hey, view is undefined. We've never said what view is." Using some ES6 destructuring, we're going to say, "View and text" to require those in. Then the second to last thing we need to do is make sure that we export this so that we can require it in our index.ios.js file. The last thing we want to do is set up some styles.

[04:33] I'm going to make sure we have a style sheet. All a style sheet is it basically just makes low level optimizations with your style sheet. Also what I'm going to do for styles, I don't really want to bore you. I don't want to take this into a Flexbox lecture and a CSS lecture. All the styles I'll use I'll just paste in from what I had earlier.

[04:53] Notice with style sheet all we're doing is passing this create method and object which defines all of our styles. What that allows us to do now is on this view we can say, "Style = styles.maincontainer," I believe is what we called it.

[05:10] Now, this component is ready to test, so let's head over to index.ios.js. I'm also going to add some styles here. I'm going to remove default styles, and I'm going to add in some styles up here. Now, what I'll need to do is, on our NavigatorIOS component, I'm going to give it a style of styles.container. I also notice I spelled initial route wrong, so I'm going to redo that. Now, that looks good.

[05:49] What we expect to see when we reload our app is...here we go. We have this title. We have testing our router. Then we also have some styles added to it.