react-native-video-player-custom-ui

React native video player controls


Keywords
react-native, video, video player, video player ui, custom video player, custom video player ui, react native video, react native video player, react native video controls
License
ISC
Install
npm install react-native-video-player-custom-ui@1.1.0

Documentation

react-native-video-player-custom-ui

A react native component that lets you create custom ui for video player.

Installation

Run npm install rreact-native-video-player-custom-ui in your project directory.

Note: This package needs peer dependency of react-native-video please install and configure before you proceed.

Usage

This snippet would produce the output shown in the above gif

import React, { Component } from 'react';
import CustomVideoPlayer from 'rreact-native-video-player-custom-ui';

const Test = (props: any) => {
  return (
      <CustomVideoPlayer uri={"YOUR_VIDEO_URL"}/>
  )
}

Props

Prop Type Optional Default Description
uri string No null supports video url and storage url
play boolean yes false handles playback
width number string Yes 100%
height number string Yes 30%
autoplay boolean yes false handles autoplay
loop boolean yes false video will play continously
playIcon number yes image custom icon for play
pauseIcon number yes image custom icon for pause
replayIcon number yes image custom icon for replay
theme string yes white player color theme
radius number yes 10 border radius for player
controls boolean yes true show/hide controls
seekBarWidth number string Yes 80%
seekBarFilledColor string yes white seek bar finished color
seekBarUnfilledColor string yes white seek bar unfinished color
thumbStyle object yes seekbar thumb style
resizeMode string yes contain player resize mode
onComplete function yes triggers on video completion
onReplay function yes triggers on replay

Contributing

If you find a bug just open a PR or an issue and ping me!