This video lesson is a crash course to flexbox, the popular CSS display mode that React Native uses for layout. Learn how to position elements anywhere on the screen with flexbox.
- [Narrator] In this next lesson, we're going to take a look…at how to lay elements out on the screen in React Native.…Now, in order to provide consistent layouts…for various phone screen sizes,…React Native uses the Flexbox display mode from CSS.…Flexbox allows us to specify where to place elements…on a screen without hard-coding values…such as pixels or percentages.…Now, I'm going to pick up right from where I left off…in the last lesson.…In fact, I still have the code from index.ios.js…in front of me.…I still have the application loaded…in my iPhone 6 simulator.…
Any changes I make to index.ios.js will automatically be…updated in the simulator,…because we have LiveReload enabled.…So in the last lesson, we created this styles variable,…using the StyleSheet.create method.…Let me go ahead and cut this onto my clipboard…with Command X.…Now this is just a personal preference,…but I prefer to see the component first in a file.…So I'm just going to add our styles down here…below the component definition.…Now take a look at our component.…
- How React Native works
- Running an iOS app
- Debugging an app
- Working with components
- Creating style sheets
- Preparing a color list and color info
- Using the navigator
- Fetching data
Skill Level Intermediate
Q: This course was updated on 08/21/2017. What changed?
A: New videos were added that cover Android setup and running the Android emulator. In addition, the following topics were updated: building color info component, fetching data, and incorporating a WebView.
1. What Is React Native?
2. Getting Started
3. Native Components
4. Working with Views
5. Platform APIs
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.