{"_id":"58f7a4c9cbd001190056cc33","project":"578c4badbd223d2000cc1441","__v":0,"version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"category":{"_id":"58f7a4c8cbd001190056cbfc","__v":0,"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"parentDoc":null,"user":"578c4a62bd223d2000cc143e","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T23:35:19.451Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"Viro scenes are 3D environments, but often it's useful to display 2D content. 2D content provides a simple mechanism to provide information to the user, through text and images, or to expose targets for interactivity, like buttons.\n\nViro provides the following traditional UI controls:\n\n* [<ViroImage>](doc:viroimage): display images, remote or local\n* [<ViroButton>](doc:virobutton): touchpoint for interactivity\n* [<ViroText>](doc:virotext2): display text, with powerful formatting options\n* [<ViroSpinner>](doc:virospinner): traditional indeterminate progress indicator\n* [<ViroVideo>](doc:virovideo-2-compare): stream video, remote or local, onto a 2D surface\n\nEach of these components supports a wide variety of [Events](doc:events), and have specific properties that all documented in their individual reference guides linked above.\n\nTo place these controls in your scene, set their ```position``` attribute and add them to a ```<ViroNode>```. However, since placing controls absolutely in this manner can often be tedious and time-consuming, we also implement Flexbox, a familiar and powerful way to layout your UI.\n[block:api-header]\n{\n  \"title\": \"Flexbox Layouts\"\n}\n[/block]\nThe flexbox algorithm is used in CSS to layout 2D components. A good overview of flexbox in CSS can be found [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Much like React Native, Viro supports a subset of [flexbox layout properties](https://facebook.github.io/react-native/docs/layout-props.html).\n\nLike React Native, the Viro platform also supports  [flexbox](https://facebook.github.io/react-native/docs/flexbox.html). This allows you to create components like menus, content panels, and other 2D layouts easily.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Using Flexbox in Viro\"\n}\n[/block]\nTo use Flexbox in Viro, you need to use a ```<ViroFlexView>```. A ```<ViroFlexView>``` is a container object that allows you to create 2D Panels that anchor in 3D space. The components that are allowed to be children of a ```<ViroFlexView>``` are ```<ViroText>```, ```<ViroImage>```, ```<ViroVideo>```, ```<ViroButton>```, ```<ViroSpinner>```, and  ```<ViroFlexView>``` itself. \n\nLet's start with a simple example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroFlexView style={{flexDirection: 'row', padding: .1}} \\n              width={5.0} height={5.0} \\n              position={[-5.0, 0.0, -2.0]}\\n              rotation={[0, 45, 0]} >\\n  <ViroImage source={require('./res/myImage1.jpg')} style={{flex: .5}} />\\n  <ViroImage source={require('./res/myImage2.jpg')} style={{flex: .5}}/>\\n</ViroFlexView>\\n\",\n      \"language\": \"javascript\",\n      \"name\": null\n    }\n  ]\n}\n[/block]\n\nThe result of the above code is a simple row of 2 images aligned side by side. The ```<ViroFlexView>``` above has a ```style``` property, which defines the layout of the children. In this example we are telling the ```<ViroFlexView>``` to align its children in a row by setting ```flexDirection:row```. We also indicate that each child should have a padding of 0.1.\n\nThe ```<ViroImage>``` children also have style properties. In this example, they use the ```flex``` property to indicate how large they should be within the container. In this case the value for both images is 0.5, so each ends up taking half the space of the container. \n\nThis example only touches the most basic Flexbox properties. A list of all layout properties can be found [here](https://facebook.github.io/react-native/docs/layout-props.html).\n\n## Advanced Example\n\nLet's say you want to create something more complex, that has a image in the top row and two images aligned side by side in the bottom row. This would involve nested ```<ViroFlexView>``` containers. The example below demonstrates how to accomplish this in ```render()```:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"render() {\\n  \\n//... render code that has <ViroScene>, etc.\\n  \\n<ViroFlexView style={{flexDirection: 'column', padding: .1}}\\n              width={5.0} height={5.0} \\n              position={[-5.0, 0.0, -2.0]} \\n              rotation={[0, 45, 0]} >\\n  <ViroImage source={require('./res/topImage.jpg')} style={{flex: .5}} />\\n  <ViroFlexView style={{flex: .5, flexDirection: 'row'}} >\\n    <ViroImage source={require('./res/myImage1.jpg')} style={{flex: .5}} />\\n    <ViroImage source={require('./res/myImage2.jpg')} style={{flex: .5}} />\\n  </ViroFlexView>\\n</ViroFlexView>\\n    \\n//... whatever other views we have!!\\n},\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n From the example above, you can see we added a nested ```<ViroFlexView>``` that changes the ```flexDirection``` of the children to ```row``` and adds padding. You can nest as many ```<ViroFlexView>``` containers as you wish. \n\nNote that the outermost ```<ViroFlexView>``` is the only element that has a ```position``` and ```rotation``` property. ```Position```, ```rotation``` and ```scale``` props are *only* respected with the outermost ```<ViroFlexView>```. These properties anchor the 2D panel in 3D space.\n\nCheck out our [Code Samples](doc:code-samples) for more examples on how to use Flexbox to create 2D UI in VR.","excerpt":"Add interactivity to your scenes with traditional UI controls","slug":"flexbox-ui-layouts","type":"basic","title":"UI Controls & Flexbox"}

UI Controls & Flexbox

Add interactivity to your scenes with traditional UI controls

Viro scenes are 3D environments, but often it's useful to display 2D content. 2D content provides a simple mechanism to provide information to the user, through text and images, or to expose targets for interactivity, like buttons. Viro provides the following traditional UI controls: * [<ViroImage>](doc:viroimage): display images, remote or local * [<ViroButton>](doc:virobutton): touchpoint for interactivity * [<ViroText>](doc:virotext2): display text, with powerful formatting options * [<ViroSpinner>](doc:virospinner): traditional indeterminate progress indicator * [<ViroVideo>](doc:virovideo-2-compare): stream video, remote or local, onto a 2D surface Each of these components supports a wide variety of [Events](doc:events), and have specific properties that all documented in their individual reference guides linked above. To place these controls in your scene, set their ```position``` attribute and add them to a ```<ViroNode>```. However, since placing controls absolutely in this manner can often be tedious and time-consuming, we also implement Flexbox, a familiar and powerful way to layout your UI. [block:api-header] { "title": "Flexbox Layouts" } [/block] The flexbox algorithm is used in CSS to layout 2D components. A good overview of flexbox in CSS can be found [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Much like React Native, Viro supports a subset of [flexbox layout properties](https://facebook.github.io/react-native/docs/layout-props.html). Like React Native, the Viro platform also supports [flexbox](https://facebook.github.io/react-native/docs/flexbox.html). This allows you to create components like menus, content panels, and other 2D layouts easily. [block:api-header] { "type": "basic", "title": "Using Flexbox in Viro" } [/block] To use Flexbox in Viro, you need to use a ```<ViroFlexView>```. A ```<ViroFlexView>``` is a container object that allows you to create 2D Panels that anchor in 3D space. The components that are allowed to be children of a ```<ViroFlexView>``` are ```<ViroText>```, ```<ViroImage>```, ```<ViroVideo>```, ```<ViroButton>```, ```<ViroSpinner>```, and ```<ViroFlexView>``` itself. Let's start with a simple example: [block:code] { "codes": [ { "code": "<ViroFlexView style={{flexDirection: 'row', padding: .1}} \n width={5.0} height={5.0} \n position={[-5.0, 0.0, -2.0]}\n rotation={[0, 45, 0]} >\n <ViroImage source={require('./res/myImage1.jpg')} style={{flex: .5}} />\n <ViroImage source={require('./res/myImage2.jpg')} style={{flex: .5}}/>\n</ViroFlexView>\n", "language": "javascript", "name": null } ] } [/block] The result of the above code is a simple row of 2 images aligned side by side. The ```<ViroFlexView>``` above has a ```style``` property, which defines the layout of the children. In this example we are telling the ```<ViroFlexView>``` to align its children in a row by setting ```flexDirection:row```. We also indicate that each child should have a padding of 0.1. The ```<ViroImage>``` children also have style properties. In this example, they use the ```flex``` property to indicate how large they should be within the container. In this case the value for both images is 0.5, so each ends up taking half the space of the container. This example only touches the most basic Flexbox properties. A list of all layout properties can be found [here](https://facebook.github.io/react-native/docs/layout-props.html). ## Advanced Example Let's say you want to create something more complex, that has a image in the top row and two images aligned side by side in the bottom row. This would involve nested ```<ViroFlexView>``` containers. The example below demonstrates how to accomplish this in ```render()```: [block:code] { "codes": [ { "code": "render() {\n \n//... render code that has <ViroScene>, etc.\n \n<ViroFlexView style={{flexDirection: 'column', padding: .1}}\n width={5.0} height={5.0} \n position={[-5.0, 0.0, -2.0]} \n rotation={[0, 45, 0]} >\n <ViroImage source={require('./res/topImage.jpg')} style={{flex: .5}} />\n <ViroFlexView style={{flex: .5, flexDirection: 'row'}} >\n <ViroImage source={require('./res/myImage1.jpg')} style={{flex: .5}} />\n <ViroImage source={require('./res/myImage2.jpg')} style={{flex: .5}} />\n </ViroFlexView>\n</ViroFlexView>\n \n//... whatever other views we have!!\n},", "language": "javascript" } ] } [/block] From the example above, you can see we added a nested ```<ViroFlexView>``` that changes the ```flexDirection``` of the children to ```row``` and adds padding. You can nest as many ```<ViroFlexView>``` containers as you wish. Note that the outermost ```<ViroFlexView>``` is the only element that has a ```position``` and ```rotation``` property. ```Position```, ```rotation``` and ```scale``` props are *only* respected with the outermost ```<ViroFlexView>```. These properties anchor the 2D panel in 3D space. Check out our [Code Samples](doc:code-samples) for more examples on how to use Flexbox to create 2D UI in VR.