React VR makes use of a Flexbox style layout algorithm to automatically position components and their children.
The library we use, CSSLayout, tries to follows the web implementation of flexbox as much as possible. CSSLayout does make changes to the default properties, and these changes can be forked to allow testing in a browser environment.
In most cases, children are arranged vertically in a
'column' or horizontally in a
'row'. This arrangement behavior, as well as size and alignment, are controlled through style properties of the component.
Here are some of the more common attributes:
flexDirection- Can be
justifyContent- Can be
alignItems- Can be
margin- specifies space around the item.
The behavior of these and other layout attributes is demonstrated by the LayoutSample included with React VR. This sample displays the following scene, with buttons arranged vertically:
Colored buttons with text can be generated by the following code within a component:
For more information about layout, see Layout with Flexbox in the React Native docs.
React VR doesn't use a special language or syntax for defining styles. All of the core and VR components accept a prop named
The style names and values usually match how CSS works on the web, except names are written like
backgroundColor instead of
width, and so on. This direct inline approach is simple and is what we usually do for sample code.
As a component grows in complexity, it is often cleaner to use
StyleSheet.create to define several styles in one place.
Such styles can be used directly inside of the style property. The shorter syntax encourages style reuse.
You can also pass an array of styles:
In style arrays, the styles are merged and the members of the last array element take precedence. This means we can use this approach to help inherit styles or override their elements.
A component's width and height style properties determine its size in the world and during layout.
React VR uses meters as its units unlike React Native, which uses pixels. Using meters is important, as it gives meaningful physical size to the object in the VR world. Meter units are also used by the WebVR APIs.
The distance and dimensional units for the Web version of React VR are meters.
You can file an issue on GitHub if you see a typo or error on this page!