Continue the match component and build out its render method to draw our tinder swipe cards to the screen. In this video, learn how to use JSX to render the users matches
- [Instructor] Previously, we created our MatchList class.…Now, let's add some rendering to it.…The first thing we are going to want to do…is install our swipe card package, React Native swipe cards.…We'll do this using npm install…- -save react-native-swipe-cards.…Hit enter, now that that's finished, let's clear the screen.…Next, we'll go back to our code editor,…and open up our component.…Let's import that package, import SwipeCards…from 'react-native-swipe-cards', great.…
Now, let's go down and create…a render method called renderCard.…And this method's going to take in a post,…and our matches store, we'll call it just store.…The first thing we'll do in here…is create a constant called postObj…and that's going to be equal to our post.…Now what would happen if the postObj happened to be null?…If we try to index into it, we're going to get an error.…So, let's check for that.…We'll do post ? , so if our post is not null,…we'll go ahead an pass back the data within it.…
If it is null, we're not going to index,…
- 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
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Web Interface with React.jswith Ray Villalobos1h 21m Intermediate
1. Getting Set Up
2. Building an App
3. Create a Login Screen
4. Create a Match Feature
5. Create a Post Feature
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.