React Native player component

npmnpm tsts

React Native video player to play vod and lives from


npm install


yarn add

Note: if you are on iOS, you will need this extra step:
Install the native dependencies with Cocoapods

cd ios && pod install


For the moment, this player component is based on the's javascript player (displayed in a react-native-webview), and therefore it suffers from the same limitation as every players displayed in browsers.

Especially, on Android decives, the first play action on an unmuted video must triggered by a user interaction with the player (that means that you can't use the play() methods on an unmuted video if the playback hasn't been started before).

We plan to base the player component on natives video players in a further release to avoid this kind of limitation. Stay tuned!


Getting started

import React from 'react';
import ApiVideoPlayer from '';

const App = () => 
    <ApiVideoPlayer videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />
export default App;

Using methods

import React, { Component } from 'react';
import ApiVideoPlayer from '';
import { Button, View } from 'react-native';

export default class App extends Component {

  render() {
    return (
      <View style={{ flex: 1 }}>
          ref={(r) => (this.player = r)}
          videoId="vi2G6Qr8ZVE67dWLNymk7qbc" />

        <Button onPress={() =>} title="Play" />
        <Button onPress={() => this.player.pause()} title="Pause" />


Props & Methods

// props:
type PlayerProps = {
    // the id of the video (required)
    videoId: string;
    // whether the video is vod or live (default is 'vod')
    type?: 'vod' | 'live';
    // the controls are hidden (default false)
    hideControls?: boolean;
    // the video title is hidden (default false)
    hideTitle?: boolean;
    // start playing the video as soon as it is loaded (default false)
    autoplay?: boolean;
    // once the video is finished it automatically starts again (default false)
    loop?: boolean;
    // the video is muted (default false)
    muted?: boolean;
    // style to apply to the player component
    style?: StyleProp<ViewStyle>;

    onControlsDisabled?: () => void;
    onControlsEnabled?: () => void;
    onEnded?: () => void;
    onError?: () => void;
    onFirstPlay?: () => void;
    onFullScreenChange?: () => void;
    onPause?: () => void;
    onPlay?: () => void;
    onPlayerResize?: () => void;
    onQualityChange?: (resolution: { height: number, width: number }) => void;
    onRateChange?: () => void;
    onReady?: () => void;
    onResize?: () => void;
    onSeeking?: () => void;
    onTimeUpdate?: ( currentTime: number ) => void; 
    onUserActive?: () => void;
    onUserInactive?: () => void;
    onVolumeChange?: ( volume: number ) => void;

// methods:
play(): void;
pause(): void;
requestFullscreen(): void;
seek(time: number): void;
setCurrentTime(time: number): void;
setPlaybackRate(rate: number): void;
setVolume(volume: number): void;


If you have any questions, ask us here: .
Or use Issues.


MIT License
Copyright (c) 2021

Did this page help you?