Name: Use flexbox to create layouts in React 360
Uploaded: 2019-05-10T11:16:48-05:00
Description: In this lesson we are going to learn how to use flexbox in React 360 in order to create a list of countries that the user would like to visit

Start a Virtual Reality project with React 360

Write text using the React 360 Text component

Use flexbox to create layouts in React 360

Assign multiple styles to a component in React 360

Display images using the Image component in React 360

Create a Cylinder Surface and attach a component to it in React 360

Create a Flat Surface and attach a component to it in React 360

Add 3D objects to a React 360 application

Capture user interaction in React 360 with VrButton component 

Change 360 panorama background in React 360 app

Use Prefetch component to fetch images before they are needed in React 360

Add animations to React 360 components

Create Native Modules to extend React 360 app functionality

Build a React 360 app for production

VR Applications using React 360

In this lesson we are going to learn how to use flexbox in React 360 in order to create a list of countries that the user would like to visit

https://app.egghead.io/api/v1/lessons/react-use-flexbox-to-create-layouts-in-react-360/subtitles

Instructor: [0:00] We have two text components which are displayed over here. They have a width specified to 30 percent. Even though they could fit in a single line, they have displayed one under another.

[0:10] The reason that it happens is that, by default, React 360 uses Flexbox and the default flex direction is set to column. If I were to change the flex direction of this major component to row, and after I save and refresh that, we're going to see those two text components in a single line.

[0:26] Next, we're going to build a list of countries that we would like to visit. I'm going to copy and paste some text components. We're going to change the greeting to menu item, as well as we're going to remove the flex direction set to row. After I save and refresh that, we're going to see all those countries displayed over here.

[0:42] Next, let's remove this hard coded hide. We're going to center all those countries in the middle of this component. We're going to use Flexbox. I'm going to set the align items to center, as well as justify content to center, as well.

[0:57] After I save and refresh that, we're going to see the result over here. We have the list of all the countries centered both horizontally and vertically inside of this view component.

Use flexbox to create layouts in React 360

Share this video with your friends

Course

VR Applications using React 360