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!
