React VR: Code Practice

React VR is a JavaScript framework used to create Virtual Reality applications. Let's practice editing our code!

Visit Setting up React VR to set up.

This lesson was inspired by a workshop I attended: ReactVR - a VR Workshop with Javascript. Thank you to Praveen Yalamanchi and Damian Montero.

Part 1: Background Color

In the example below, I change the background color to yellow. Change the text's background color to anything you like.

<Text style={{textAlign: "center", fontSize: 0.4, color: 'black',backgroundColor: 'yellow',}}>Beach Items: {this.props.text}</Text>
  

Part 2: Delete "Beach Items"

Delete the text "Beach Items". Your code should now look like the example below.

<Text style={{textAlign: "center", fontSize: 0.4, color: 'black',backgroundColor: 'yellow',}}>{this.props.text}</Text>
  

Part 3: Create Class

Create a new class called "Heading". Use props to have the heading say "Beach Items". Format the text however you like.

// Heading
class Heading extends Component {
  render() {
		return (
			<Text style={{textAlign: "center", fontSize: 0.4, color: 'orange',backgroundColor: 'white',}}>{this.props.head}</Text>
		)
	}
};
  

Part 4: Add to Root Component

See the example below.

export default class Basics extends Component {

 	render() {
		return (
      <View>
				<Pano source={asset('water-view.jpeg')}></Pano>
				<View>
				  style={{
				    transform: [{translate: [0, 0, -3]}],
				    layoutOrigin: [0.5, 0.5]
				  }}>
          <Heading head='Beach Items' />
          <Beach text='Towel' />
          <Beach text='Sunscreen' />
          <Beach text='Beverage' />
				</View>
			</View>
		)
	}
};
  

You should see something like this:

Women in Tech:

Create a LAMP environment

Coding Commanders Newsletter

Back to Exercise 4 | Continue to Exercise 6