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 write text using `<Text/>` component in React 360 and how to style it using `style` property.

https://app.egghead.io/api/v1/lessons/react-write-text-using-the-react-360-text-component/subtitles

Instructor: [00:00] Start by removing all the boilerplate. This travelVR component is going to render null, and we are not going to have any styles. Next, render a view component. Inside of this view, we're going to have a text component, like this. I am going to type in "Hello, Egghead" inside of this text component.

[00:15] After we save and refresh this, we're going to see this text, "Hello, Egghead," appearing over here. We would like to be able to style both view -- view is basically like a div -- and a text component. To do that, we're going to have a mainView and a greetings object.

[00:31] Inside of the mainView, we're going to have a height of 600, width of 600, as well as padding of 10, and we're going to set the background color to this shade of gray. Inside of the greetings object, font size of 40. We're going to set the width to 50 percent, margin top to 5, background color to this shade of blue, and the color of the text to white.

[00:59] Each React 360 component takes a style property. We're going to set the style of this view to be equal to styles.mainView. We're going to set the style of this text to styles.greetings. After I save and refresh that, we're going to see the result over here.

[01:16] We can see both the view and the text component styled using the CSS that we've defined over here. We can use the same styles for multiple components. If I were to have another text component over here, and I would set the text to "Hello again," after I save, refresh that, we're going to have two text components with exactly the same styles applied.

Write text using the React 360 Text component

Share this video with your friends

Course

VR Applications using React 360