https://github.com/zikwall/re-player
:clapper: Video player for React Native based on ReactNativeVideo
https://github.com/zikwall/re-player
android controls ios live player react-native video video-player
Last synced: 12 months ago
JSON representation
:clapper: Video player for React Native based on ReactNativeVideo
- Host: GitHub
- URL: https://github.com/zikwall/re-player
- Owner: zikwall
- Created: 2020-02-29T17:37:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-17T16:06:36.000Z (almost 6 years ago)
- Last Synced: 2025-06-15T12:58:16.674Z (about 1 year ago)
- Topics: android, controls, ios, live, player, react-native, video, video-player
- Language: JavaScript
- Homepage:
- Size: 12.8 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
For React Native Apps
powered by PlayHub app
Common | Adaptive | Live Streaming
--- | --- | ---
 |  | 
### Features
- [x] Easy Customizable: events, icons components, other `props`.
- [x] Light Animated & Responsive Components
- [x] Controls & UI:
- [x] Play/Pause & with BigPlay
- [x] Volume with adaptive icons depending on the sound level & `onPress` for mute/unmute.
- [x] Crop (resize mode).
- [x] Full-screen mode.
- [x] Overlay Sidebar: You can set you custom content in side bar, e.g. playlist or related videos.
- [x] Lock: You can lock the control buttons and not show them.
- [x] Back from full-screen.
- [x] Title component on full-screen, e.g. text or text with image.
- [x] Custom Events
- [x] On double taps left/right.
- [x] On double taps video transform to full-screen, one tab set visible controls.
- [x] Intercepts a standard gesture/button back during full-screen mode to exit it.
- [x] e.g. `onFullscreen`, `onPause`/`onPlay`, etc.
- [x] Video types
- [x] Stream/Online without time controls & mark `live`.
- [x] Video ends with time controls & dynamic formatted (`h:i:s`) duration times (current, end).
### Props
- [x] `source` array of object { size: int, src: string }
- [x] `title` string
- [x] `nativeProps` object, available native react-native-video props
- [x] `progressComponent` component, to set the loading status
#### Future todo
- [ ] `playlist`, see [Playlist Branch](https://github.com/zikwall/re-player/tree/playlist)
- [ ] `fullscreenEnabled`
- [ ] `hardwareEnabled`
- [ ] `overlayEnabled`
- [ ] `lockEnabled`
- [ ] `doubleTapFullscreenEnabled`
- [ ] `doubleTapSeekEnabled`
- [ ] `statusBarMode`
- [ ] `adTag`, wait PR: [#1839](https://github.com/react-native-community/react-native-video/pull/1839)
### Events
- [x] `onEventLoadStart()`
- [x] `onEventLoad(videoData)`
- [x] `onEventProgress(currentTime)`
- [x] `onEventCrop(mode)`
- [x] `onEventSeek(value)`
- [x] `onEventDoubleTapSeek(seekValue, direction)`, direction one of `left`, `right`
- [x] `onEventFullscreen(isFullscreen)`
- [x] `onEventDoubleTapFullscreen(isFullscreen)`
- [x] `onEventPlayPause(isPaused)`
- [x] `onEventLock(isLocked)`
- [x] `onEventMute(isMuted)`
- [x] `onEventVolumeChange(volumeValue)`
- [x] `onEventAudioBecomingNoisy()`
- [x] `onEventAudioFocusChanged(hasAudioFocus)`
- [x] `onEventHardwareBackPress(isFullscreen)`
- [x] `onEventOverlayClose()`
- [x] `onEventOverlayOpen()`
- [x] `onEventShowControls`
### Installation
#### Before install dependencies
- [x] `prop-types`
- [x] `react-native-video`, see manual: https://github.com/react-native-community/react-native-video
- [x] `react-native-orientation`, see manual: https://github.com/yamill/react-native-orientation
- [x] `react-native-vector-icons`, see manual: https://github.com/oblador/react-native-vector-icons
- [x] `@react-native-community/slider`, see manual: https://github.com/react-native-community/react-native-slider
- [x] `react-native-typography`, see manual: https://github.com/hectahertz/react-native-typography
#### Install RePLayer
- [x] `npm i @zikwall/re-player`
- [x] from git add `package.json` next line: `"@zikwall/re-player": "git+https://git@github.com/zikwall/re-player.git"`
### Usage is very simple
```js
import React from 'react';
import {
View,
} from 'react-native';
import RePlayer from '@zikwall/re-player';
const App = () => {
return (
)
}
```
#### 16:9 aspect ratio example
```js
// ...
return (
)
// ...
```
### Screenshots
General | Fullscreen
--- | ---
 | 
 | 