JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5621
  • Score
    100M100P100Q121548F
  • License MIT

A <YouTube/> component for React Native.

Package Exports

  • react-native-youtube

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-youtube) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-youtube react-native-youtube npm version Dependency Status

A <YouTube/> component for React Native.

Uses Google's official youtube-ios-player-helper and exposes much of the API into React Native.

Screenshot

Screenshot of the example app

Usage

<YouTube
  ref="youtubePlayer"
  videoId="KVZ-P-ZI6W4" // The YouTube video ID
  play={true}           // control playback of video with true/false
  hidden={false}        // control visiblity of the entire view
  playsInline={true}    // control whether the video should play inline
  loop={false}          // control whether the video should loop when ended

  onReady={(e)=>{this.setState({isReady: true})}}
  onChangeState={(e)=>{this.setState({status: e.state})}}
  onChangeQuality={(e)=>{this.setState({quality: e.quality})}}
  onError={(e)=>{this.setState({error: e.error})}}
  onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: e.duration})}}

  style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}
/>
this.refs.youtubePlayer.seekTo(20);

Properties

  • videoID: The YouTube video ID to play, can be changed to change the video playing.
  • play: Controls playback of video with true/false. Setting it as true in the beginning itself makes the video autoplay on loading.
  • hidden: Controls the view.hidden native property. For example, use this to hide player while it loads.
  • playsInline: Controls whether the video should play inline, or in full screen.
  • rel: Hides related videos at the end of the video. Default false.
  • loop: Loops the video. Default false.
  • modestbranding: This parameter lets you use a YouTube player that does not show a YouTube logo. Default false.
  • controls: This parameter indicates whether the video player controls are displayed. Supported values are 0, 1, 2. Default 1. More information
  • showinfo: Setting the parameter's value to false causes the player to not display information like the video title and uploader before the video starts playing. Default true.
  • origin: This parameter provides an extra security measure for the IFrame API.

Events

  • onReady: This function is called when the video player is setup.
  • onChangeState: Sends the current state of the player on e.state. Common values are buffering/playing/paused and more.
  • onChangeQuality: Sends the current quality of video playback on e.quality.
  • onError: Sends any errors during video playback on e.error.
  • onProgress: Sends any time progress made on e.currentTime and e.duration.

Methods

  • seekTo(seconds): Seeks to a specified time in the video

Installation

(requires react-native >= 0.6.0)

$ rnpm install react-native-youtube

Example

Try the included RCTYouTubeExample:

git clone git@github.com:paramaggarwal/react-native-youtube.git
cd react-native-youtube/Example
npm install
open RCTYouTubeExample.xcodeproj

Then Cmd+R to start the React Packager, build and run the project in the simulator.

Author

License

MIT License