Use react-natives built-in style sheets to give the login scene more attractive aesthetics. In this video, learn how to use react-natives style sheets to style the applications login page.
- [Instructor] Previously, we made our login scene,…but it needs some styling.…So we're going to use React Native StyleSheets,…which are very similar and usually match up with CSS,…to fix our login scene.…Best practice is to have your styles…in a separate file from each component.…If they're small enough, they can be inline,…which is what we've been doing up to now.…However, these styles are kind of in the middle.…They're not quite large enough to have their own file,…and they're not quite small enough just to be inline.…So we're going to do,…we're going to open up our login scene,…and we're going to put them at the bottom.…
First we'll need to import,…from React Native, StyleSheet.…We'll also need to know the dimensions of the screen,…so let's add Dimensions.…Now down at the bottom of our class,…right outside of our definition,…we're going to create a constant style,…and that style is going to equal StyleSheet.create,…and that function takes an object.…The first thing we're going to have in here…is a container.…
- 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.