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.