finish the match list and scene then combine them with the app container. In this video, learn how to hook the match scene in to the application.
- [Man] Previously, we created a component for listing our matches to finally see how everything comes together. So, let's dive in. First, we're going to open up the side menu. We're going to copy everything down to line 16. Then, we're going to make a new file in scenes and we're going to call it match scene.js. Let's go ahead and paste what we got and clean it up. First, let's get rid of some unneeded imports. We don't need list or list item and we don't need text.
What we will need is icon, so let's import that. Now, let's go down to line 10 and we're going to import our match list component. That of course comes from one directory above us in components slash match list. Now we can change our class's name to match scene and let's fix our class. There we go. We don't need to mess with the constructor at all. Let's go ahead and add a new method.
This one's going to be called post scene and its purpose is to take you from the match scene to the post scene. So, it's going to call this.props.navigator.push. And we haven't used push yet in the project. What push does, it's going to take our new scene and overlay it on top of the old scene. If you think about our navigation as if it were a deck of cards, we're basically taking out a new card and putting it on top of the deck. So, let's fill out the information for that.
We're going to have a title. That title is going to be post. It's also going to need some pass props. So we'll just give them the props we currently have. Great. Next, let's tackle the render function. It's going to return, open parentheses. We're going to start off with a container. We're going to apply the theme to that container. This.props.theme. Inside of the container, we're going to do a header. This header is going to contain a button on one side.
It's going to be transparent and it'll have an event handler of on press. It's going to equal this.props.toggledrawer. Now we'll finally see how that drawer comes into play here. Now, since this button's transparent, we're going to need something for the user to tap on. Let's add an icon. We're going to use the icon menu. We can just go ahead and close that where it is. Let's close up our button. Then, we're going to add a title to our header.
Since we're on the match scene, let's go ahead and call it matches and close our title. Then, we're going to add one more button. This button's also going to be transparent 'cause it's also going to be an icon button. For our on press, we're going to call this.postscene. We're going to have to bind it to this. Now, it looks like we've made a typo on line 27, so let's go fix that real quick. Just closing up that button.
Go ahead and do the same thing down here on line 34 and we'll add the icon. This one's name is going to be camera. We're going to give it a color of white. Now, the originally icon's a little small. Let's bump it up and give it a size of 28 pixels. Let's close this icon tag and close our button tag and we can close our header. Now, let's open a view for our main content. Inside of that view, we're just going to call our match list, pass at the stores that we want, which happens to be this.props.stores.
Close it up, close that view, and let's close the container as well. Fix some styling there and that's it. Let's go ahead and save the match scene. Now, let's head into our app container and with the other scenes, I'm just going to add a new line on line 13. We'll do import, match scene. It's going to come from ./scenes/matchscene.
We can go down to render scene and add a new case. That case is going to be match. As usual, I'm going to return the match scene component. Use the spread operator to give it our pass props, so root.passprops and we'll give it the navigator. Now, let's close this guy, save it, and then let's head over to the terminal and test it out. We're going to do react dash native, run dash iOS.
Now, if you're not using iOS, you can run this using run dash android instead. Hit enter, wait for it to finish building, pop up our Google Chrome, and then we can head into the simulator. Swap over to our simulator. Splash screen. Let's go ahead and log in. We'll use our email@example.com user and our password of testtest. Click the login button. Looks like we've got an error.
Possible unhandled promise rejection, ID zero. Title is not defined. Let's take a look at that. So, it's telling us the title is not defined in our match scene's render function. Let's go back to our code, open up our match scene and probably from that error, we can assume it's talking about this title tag and sure enough, we didn't import it. So, let's go ahead and import that. Save the file. Let's go back to our simulator.
It's already reloaded for us. Now, let's enter our email, firstname.lastname@example.org and we'll enter the password, testtest. Click login and it takes us to our match scene. As you can see, we've got wonderful ice cream. We can drag it towards nope, we can drag it towards yep. That's it. Everything appears to be working. Congratulations, you now have an app that you can log into and swipe cards. Now, we can look at posts. Let's turn our attention to how to create them.
- Setting up your project and Firebase account
- Creating the app container
- Setting up basic navigation
- Creating a splash screen
- Creating a login screen
- Creating a match feature
- Creating a post feature