The Viro Developer Hub

Welcome to the Viro developer hub. You'll find comprehensive guides and sample code to help you start working with Viro as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Viro360Video

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

Example use:
<Viro360Video
    source={require("./video/myvideo.mp4")}
    onFinish={this._onFinish}
    onUpdateTime={this._onUpdateTime}
    onError={this._videoError}
    loop={true}
    paused={false}
    volume={1.0} />

Props

Required props

PropKey
PropType

source

PropTypes.oneOfType( [PropTypes.shape( {uri:PropTypes.string} ), PropTypes.number])

The video source, a remote URL or a local file resource. MPEG videos accepted.

To invoke with remote url:

{uri:"http://example.org/myvideo.mp4"}

To invoke with local source:

require('./myvideo.mp4');

Optional Props

PropKey
PropType

loop

PropTypes.bool

Set to true to loop the video. This is set to false by default.

muted

PropTypes.bool

Set to true to mute the video audio. This is set to false by default.

onBufferEnd

PropTypes.func

Callback invoked when the underlying video component has finished buffering.

onBufferStart

PropTypes.func

Callback invoked when video begins buffering. Called at least once at the beginning of playback/video creation.

onError

PropTypes.func

Callback invoked when the 360 Video fails to load. The error message is contained in event.nativeEvent.error

onFinish

PropTypes.func

Callback that is called when the video is finished playing. This function isn't called at the end of a video if looping is enabled.

onUpdateTime

PropTypes.func

Callback that is called when the current playback position has changed.

For example:

_onUpdateTime(currentPlaybackTimeInSeconds, totalPlayBackDurationInSeconds) {
    // Update Seek Bar or custom UI
}

paused

PropTypes.bool

Set to true to pause the video. This is set to false by default.

rotation

PropTypes.arrayOf(PropTypes.number)

The rotation of the box around it's local axis specified as Euler angles [x, y, z]. Units for each angle are specified in degrees.

stereoMode

PropTypes.oneOf(['leftRight', 'rightLeft', 'topBottom', 'bottomTop', 'none'])

Specifies the alignment mode of the provided stereo video in source. The video 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 video to the left eye, and the right half of the video to the right eye. Similarly, topBottom will render the top half of the video to the left eye, and the bottom half of the video to the right eye.

Defaults to none.

volume

PropTypes.number

A number represented volume from 0 to 1. Max volume is equal to 1. Min volume is equal to 0. This is set to 1 by default.

Methods

seekToTime(timeInSeconds: number)

Sets the video to the specified time in seconds.

Parameters Description
timeInSeconds Number of seconds into video to seek to.
setNativeProps(nativeProps: object)

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 Description
nativeProps an object where the keys are the properties to set and the values are the values to set

For example, setting position natively would look like this:

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

Viro360Video


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.