Skip to content
📱A cross-platform (Android / iOS) video player with customisable controls for React Native.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Initial commit Feb 16, 2018
doc Update documentation. Feb 16, 2018
src Fix prop-type for controlsbar components. Apr 24, 2018
.gitignore Initial commit Feb 16, 2018
.npmignore Initial commit Feb 16, 2018
LICENCE Initial commit Feb 16, 2018
README.md Update documentation. Feb 16, 2018
package-lock.json Initial commit Feb 16, 2018
package.json Fix prop-type for controlsbar components. Apr 24, 2018
tsconfig.json Initial commit Feb 16, 2018
tslint.json

README.md

React Native True Sight

A cross-platform video player with customizable controls.


This library provide a fully customisable video player that work both on Android and iOS. It also come with common use case documentation of things that you would like to implements.

By default there are two commands bar that are displayed respectively on different part of the parent container:

  • Middle. Contain by default a grid display two buttons:
    • One with play / pause alternating.
    • Another that will restart the video.
  • Bottom. Contain the video current time, a progress bar and the total duration.
  • Loader. There is also a loader that will trigger while video is charging (network issues, bootstraping, ...).

Documentation

Quick documentation

This is simple as that.

VideoPlayer accept the following props.

  • source - An url that target the MP4 file.
  • autoStart - Whether or not the video should start when rendered (Default to true).
  • onError - A callback that will be called when an error occured, if the resource is not reachable for example.
  • onProgress - A callback called each time the cursor advance in the video, receiving an object as following:
    • currentTime - The current time in seconds.
    • playableDuration - The playable duration in seconds, dependings on the buffer load.
    • maximumDuration - The maximum duration of the video in seconds.
  • onEnd - A callback that will be called when the video reach the end.

For advanced configuration, such as infinite loop, check the rest of the documentation and custom controls bar.

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { View } from 'react-native'
import VideoPlayer from 'react-native-true-sight'

export default class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'black' }}>
        <VideoPlayer source="https://somevideo.mp4" />
      </View>
    )
  }
}
You can’t perform that action at this time.