{"__v":0,"_id":"58f7a4c8cbd001190056cc25","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfe","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":5,"slug":"api-reference","title":"API Reference"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","version":{"__v":1,"_id":"58f7a4c8cbd001190056cbf8","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-18T01:59:18.327Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":29,"body":"[block:api-header]\n{\n  \"title\": \"Layout Styles\"\n}\n[/block]\n###Layout styles used within [ViroFlexView](doc:viroflexview) components. Please refer to http://facebook.github.io/react-native/releases/0.41/docs/layout-props.html for more information. \n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Border related layout props are currently not supported.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Text Styles\"\n}\n[/block]\n###The styles below only apply to [ViroText](doc:virotext2). Please see that component for more info on how to define these.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**color**\",\n    \"3-0\": \"**textAlign**\",\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**ColorPropType**\\n\\nThe color of the text. The default text color is white.\\n\\nValid color formats are:\\n\\n  * '#f0f' (#rgb)\\n  * '#f0fc' (#rgba)\\n  * '#ff00ff' (#rrggbb)\\n  * '#ff00ff00' (#rrggbbaa)\\n  * 'rgb(255, 255, 255)'\\n  * 'rgba(255, 255, 255, 1.0)'\\n  * 'hsl(360, 100%, 100%)'\\n  * 'hsla(360, 100%, 100%, 1.0)'\\n  * 'transparent'\\n  * 'red'\\n  * 0xff00ff00 (0xrrggbbaa)\",\n    \"3-1\": \"**PropTypes.oneOf([ 'left', 'right', 'center'])**\\n\\nThe horizontal alignment of the text.  Default is left.\",\n    \"5-0\": \"**textClipMode**\",\n    \"6-0\": \"**textLineBreakMode**\",\n    \"5-1\": \"**PropTypes.oneOf(['none', 'clipToBounds'])**\\n\\nSet to ```clipToBounds``` to clip this text to its bounding box defined by ```width``` and ```height```. If set to ```none```, the text will overrun its bounds if's larger than them.\",\n    \"6-1\": \"**PropTypes.oneOf(['wordwrap','charwrap','justify','none'])**\\n\\nThe line break mode to use for text wrapping. We process line breaks against the ```width``` of the text. \\n\\nSet to ```wordwrap``` to introduce line breaks only at word boundaries, whenever the next word overruns the width. \\n\\nSet to ```charwrap``` to introduce line breaks whenever the next *character* overruns the width. This mode may break words in half across lines.\\n\\nSet to ```justify``` to introduce breaks at word boundaries, and add variable internal spacing between words, at the optimal points in the text to reduce the 'raggedness' of the text edges.\",\n    \"4-0\": \"**textAlignVertical**\",\n    \"4-1\": \"**PropTypes.oneOf(['top', 'bottom', 'center'])**\\n\\nThe vertical alignment of the text.  Default is top.\",\n    \"1-0\": \"**fontFamily**\",\n    \"2-0\": \"**fontSize**\",\n    \"1-1\": \"**PropTypes.string**\\n\\n[Supported Fonts](https://github.com/dabit3/react-native-fonts)\",\n    \"2-1\": \"**PropTypes.number**\\n\\nThe size of the font.  Default is 18.  Recommended font size is >=18.\"\n  },\n  \"cols\": 2,\n  \"rows\": 7\n}\n[/block]","excerpt":"","slug":"styles","type":"basic","title":"Styles"}
[block:api-header] { "title": "Layout Styles" } [/block] ###Layout styles used within [ViroFlexView](doc:viroflexview) components. Please refer to http://facebook.github.io/react-native/releases/0.41/docs/layout-props.html for more information. [block:callout] { "type": "warning", "body": "Border related layout props are currently not supported." } [/block] [block:api-header] { "type": "basic", "title": "Text Styles" } [/block] ###The styles below only apply to [ViroText](doc:virotext2). Please see that component for more info on how to define these. [block:parameters] { "data": { "0-0": "**color**", "3-0": "**textAlign**", "h-0": "PropKey", "h-1": "PropType", "0-1": "**ColorPropType**\n\nThe color of the text. The default text color is white.\n\nValid color formats are:\n\n * '#f0f' (#rgb)\n * '#f0fc' (#rgba)\n * '#ff00ff' (#rrggbb)\n * '#ff00ff00' (#rrggbbaa)\n * 'rgb(255, 255, 255)'\n * 'rgba(255, 255, 255, 1.0)'\n * 'hsl(360, 100%, 100%)'\n * 'hsla(360, 100%, 100%, 1.0)'\n * 'transparent'\n * 'red'\n * 0xff00ff00 (0xrrggbbaa)", "3-1": "**PropTypes.oneOf([ 'left', 'right', 'center'])**\n\nThe horizontal alignment of the text. Default is left.", "5-0": "**textClipMode**", "6-0": "**textLineBreakMode**", "5-1": "**PropTypes.oneOf(['none', 'clipToBounds'])**\n\nSet to ```clipToBounds``` to clip this text to its bounding box defined by ```width``` and ```height```. If set to ```none```, the text will overrun its bounds if's larger than them.", "6-1": "**PropTypes.oneOf(['wordwrap','charwrap','justify','none'])**\n\nThe line break mode to use for text wrapping. We process line breaks against the ```width``` of the text. \n\nSet to ```wordwrap``` to introduce line breaks only at word boundaries, whenever the next word overruns the width. \n\nSet to ```charwrap``` to introduce line breaks whenever the next *character* overruns the width. This mode may break words in half across lines.\n\nSet to ```justify``` to introduce breaks at word boundaries, and add variable internal spacing between words, at the optimal points in the text to reduce the 'raggedness' of the text edges.", "4-0": "**textAlignVertical**", "4-1": "**PropTypes.oneOf(['top', 'bottom', 'center'])**\n\nThe vertical alignment of the text. Default is top.", "1-0": "**fontFamily**", "2-0": "**fontSize**", "1-1": "**PropTypes.string**\n\n[Supported Fonts](https://github.com/dabit3/react-native-fonts)", "2-1": "**PropTypes.number**\n\nThe size of the font. Default is 18. Recommended font size is >=18." }, "cols": 2, "rows": 7 } [/block]