{"_id":"59bc03d31d2d8d001a344585","category":{"_id":"59bc03d31d2d8d001a344583","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-01T23:04:12.838Z","from_sync":false,"order":6,"slug":"api-reference","title":"API Reference"},"user":"57bb7defafc18c0e00529cf1","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-18T05:00:51.669Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"A component that displays a 360 photo sphere that surrounds the user. \n\n######Example use:\n```\n<Viro360Image\n    source={require(\"./res/myimage.png\")}\n    rotation={[0, 45, 0]}\n    format=\"RGBA8\"\n    onLoadStart={this._onLoadStart}\n    onLoadEnd={this._onLoadEnd}\n    onError={this._onError} />\n```\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Props\"\n}\n[/block]\n##Required props\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-1\": \"**PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])**\\n\\nThe image source, a remote URL or a local file resource. PNG and JPG images accepted.\\n\\nTo invoke with remote url: \\n```\\n{uri:\\\"http://example.org/myimage.png\\\"}\\n```\\nTo invoke with local source:\\n```\\nrequire('./image.png');\\n```\",\n    \"0-0\": \"**source**\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\n##Optional Props\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"PropKey\",\n    \"h-1\": \"PropType\",\n    \"0-0\": \"**format**\",\n    \"0-1\": \"**PropTypes.oneOf(['RGBA8', 'RGBA4', 'RGB565'])**\\n\\nImage texture formats for storage on the GPU.\\n\\n|Format|Description|\\n|:------|:----------:|\\n|RGBA8| Each pixel is described with 32-bits, using eight bits per channel|\\n|RGBA4|  Each pixel is described with 16 bits, using four bits per channel|\\n|RGB565|  Formats the picture into 16 bit color values without alpha|\",\n    \"3-0\": \"**onLoadStart**\",\n    \"3-1\": \"**React.PropTypes.func**\\n\\nCallback triggered when we are processing the image to be displayed in this 360 Photo (either downloading / reading from file).\",\n    \"4-1\": \"**PropTypes.arrayOf(PropTypes.number)**\\n\\nThe rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.\",\n    \"4-0\": \"**rotation**\",\n    \"1-0\": \"**onLoadEnd**\",\n    \"1-1\": \"**React.PropTypes.func**\\n\\nCallback triggered when we have finished loading the 360 image to be displayed. Whether or not the image was loaded and displayed properly will be indicated by the parameter \\\"success\\\".\\n For example:\\n  ``` \\n      _onLoadEnd(event:Event) {\\n      // Indication of asset loading success\\n        if(event.nativeEvent.success) {\\n           //our image successfully loaded!\\n        }\\n      }\\n```\",\n    \"2-0\": \"**onError**\",\n    \"2-1\": \"**React.PropTypes.func**\\n\\nCallback invoked when the 360 Image fails to load. The error message is contained in event.nativeEvent.error\",\n    \"5-1\": \"**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\\n\\nSpecifies the alignment mode of the provided stereo image in source. Given image mode alignments are rendered in the order of Lefteye-Righteye. Defaults to none.\\n\\nNote: There's a known issue with stereoscopic images of the format RGB565 (the fix is on the roadmap).\",\n    \"5-0\": \"**stereoMode**\"\n  },\n  \"cols\": 2,\n  \"rows\": 6\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Methods\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"setNativeProps(nativeProps: object)\",\n    \"0-0\": \"A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\\n\\n|Parameter|Description|\\n|---|---|\\n|nativeProps | an object where the keys are the properties to set and the values are the values to set  |\\n\\nFor example, setting position natively would look like this:\\n\\n```\\ncomponentRef.setNativeProps({\\n    position : [0, 0, -1]\\n});\\n```\"\n  },\n  \"cols\": 1,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"viro360image","type":"basic","title":"Viro360Image"}
A component that displays a 360 photo sphere that surrounds the user. ######Example use: ``` <Viro360Image source={require("./res/myimage.png")} rotation={[0, 45, 0]} format="RGBA8" onLoadStart={this._onLoadStart} onLoadEnd={this._onLoadEnd} onError={this._onError} /> ``` [block:api-header] { "type": "basic", "title": "Props" } [/block] ##Required props [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-1": "**PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])**\n\nThe image source, a remote URL or a local file resource. PNG and JPG images accepted.\n\nTo invoke with remote url: \n```\n{uri:\"http://example.org/myimage.png\"}\n```\nTo invoke with local source:\n```\nrequire('./image.png');\n```", "0-0": "**source**" }, "cols": 2, "rows": 1 } [/block] ##Optional Props [block:parameters] { "data": { "h-0": "PropKey", "h-1": "PropType", "0-0": "**format**", "0-1": "**PropTypes.oneOf(['RGBA8', 'RGBA4', 'RGB565'])**\n\nImage texture formats for storage on the GPU.\n\n|Format|Description|\n|:------|:----------:|\n|RGBA8| Each pixel is described with 32-bits, using eight bits per channel|\n|RGBA4| Each pixel is described with 16 bits, using four bits per channel|\n|RGB565| Formats the picture into 16 bit color values without alpha|", "3-0": "**onLoadStart**", "3-1": "**React.PropTypes.func**\n\nCallback triggered when we are processing the image to be displayed in this 360 Photo (either downloading / reading from file).", "4-1": "**PropTypes.arrayOf(PropTypes.number)**\n\nThe rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.", "4-0": "**rotation**", "1-0": "**onLoadEnd**", "1-1": "**React.PropTypes.func**\n\nCallback triggered when we have finished loading the 360 image to be displayed. Whether or not the image was loaded and displayed properly will be indicated by the parameter \"success\".\n For example:\n ``` \n _onLoadEnd(event:Event) {\n // Indication of asset loading success\n if(event.nativeEvent.success) {\n //our image successfully loaded!\n }\n }\n```", "2-0": "**onError**", "2-1": "**React.PropTypes.func**\n\nCallback invoked when the 360 Image fails to load. The error message is contained in event.nativeEvent.error", "5-1": "**PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])**\n\nSpecifies the alignment mode of the provided stereo image in source. Given image mode alignments are rendered in the order of Lefteye-Righteye. Defaults to none.\n\nNote: There's a known issue with stereoscopic images of the format RGB565 (the fix is on the roadmap).", "5-0": "**stereoMode**" }, "cols": 2, "rows": 6 } [/block] [block:api-header] { "title": "Methods" } [/block] [block:parameters] { "data": { "h-0": "setNativeProps(nativeProps: object)", "0-0": "A wrapper function around the native component's setNativeProps which allow users to set values on the native component without changing state/setting props and re-rendering. Refer to the React Native documentation on [Direct Manipulation](https://facebook.github.io/react-native/docs/direct-manipulation.html) for more information.\n\n|Parameter|Description|\n|---|---|\n|nativeProps | an object where the keys are the properties to set and the values are the values to set |\n\nFor example, setting position natively would look like this:\n\n```\ncomponentRef.setNativeProps({\n position : [0, 0, -1]\n});\n```" }, "cols": 1, "rows": 1 } [/block]