Viro360Image

A component that displays a 360 photo sphere that surrounds the user.

Example use:

JavaScript

<Viro360Image
  source={require("./res/myimage.png")}
  rotation={[0, 45, 0]}
  format="RGBA8"
  onLoadStart={handleLoadStart}
  onLoadEnd={handleLoadEnd}
  onError={handleError}
/>

Props

source (*required)

Type	Description
ImageSourcePropType	An asset can be loaded by using require() or { uri: 'https://example.com/your-image.png' }

JavaScript

<Viro360Image
  source={require("./res/myimage.png")}
/>

<Viro360Image
  source={{ uri: 'https://example.com/your-image.png' }}
/>

isHDR

Type	Description
boolean	Set to true if we are providing a radiance HDR image (.hdr) as the source of this 360 image.

format

Type	Description
'RGBA8' | 'RGBA4' | 'RGB565'	The internal format to use for the image. This is the format we will use to store the image on the GPU. It is not the format of the source image data. This property does not apply to HDR images.

Value	Description
RGBA8	Each pixel is described with 32-bits, using eight bits per channel
RGBA4	Each pixel is described with 16 bits, using four bits per channel
RGB565	Formats the picture into 16 bit color values without alpha

onLoadEnd

Type	Description
Function	Callback triggered when we have finished loading the 360 image to be displayed. If the image was loaded and displayed correctly, the 'success' parameter will be true.

JavaScript

const handleLoadEnd = (event: Event) => {
  // Indication of asset loading success
  if (event.nativeEvent.success) {
    //our image successfully loaded!
  }
}

<Viro360Image
  source={{ uri: 'https://example.com/your-image.png' }}
  onLoadEnd={handleLoadEnd}
/>

onError

Type	Description
Function	Callback invoked when the 360 Image fails to load. The error message is contained in event.nativeEvent.error

JavaScript

const handleError = (event: Event) => {
  console.log(event.nativeEvent.error);
}

<Viro360Image
  source={{ uri: 'https://example.com/your-image.png' }}
  onError={handleError}
/>

onLoadStart

Type	Description
Function	Callback triggered when the image is processing to be displayed in this 360 Photo (either downloading / reading from file).

rotation

Type	Description
[number, number, number]	The rotation of the box around its local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.

JavaScript

<Viro360Image
  source={{ uri: 'https://example.com/your-image.png' }}
  rotation={[0,45,0]}
/>

stereoMode

Type

Description

'leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'

Specifies the alignment mode of the provided stereo image in source. The image will be rendered in the given order, the first being the left eye, the next the right eye.For example, leftRight will render the left half of the image to the left eye, and the right half of the image to the right eye. Similarly, topBottom will render the top half of the image to the left eye, and the bottom half of the image to the right eye. Defaults to none.

🚧

Note

There's a known issue with stereoscopic images of the format RGB565 (the fix is on the roadmap).

Methods

setNativeProps(nativeProps)

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 for more information.

Parameter	Type	Description
nativeProps	object	an object where the keys are the properties to set and the values are the values to set

JavaScript

componentRef.setNativeProps({ position: [0, 0, -1] });