A <YouTube/>
component for React Native.
Uses Google's official youtube-ios-player-helper and exposes much of the API into React Native.
<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);
videoId
: The YouTube video ID to play, can be changed to change the video playing.play
: Controls playback of video withtrue
/false
. Setting it astrue
in the beginning itself makes the video autoplay on loading.hidden
: Controls theview.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. Defaultfalse
.fs
: Controls whether the full screen button is shown. Defaulttrue
.rel
: Hides related videos at the end of the video. Defaultfalse
.loop
: Loops the video. Defaultfalse
.modestbranding
: This parameter lets you use a YouTube player that does not show a YouTube logo. Defaultfalse
.controls
: This parameter indicates whether the video player controls are displayed. Supported values are0
,1
,2
. Default1
. More informationshowinfo
: 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. Defaulttrue
.origin
: This parameter provides an extra security measure for the IFrame API.apiKey
: This parameter is required on Android for the YouTube API to work.
onReady
: This function is called when the video player is setup.onChangeState
: Sends the current state of the player one.state
. Common values arebuffering
/playing
/paused
and more.onChangeQuality
: Sends the current quality of video playback one.quality
.onError
: Sends any errors during video playback one.error
.onProgress
: Sends any time progress made one.currentTime
ande.duration
.onFullScreenEnter
(ios only): This function is called when the video player enters full screen mode.onFullScreenExit
(ios only): This function is called when the video player exits full screen mode.
seekTo(seconds)
: Seeks to a specified time in the video
(requires react-native >= 0.6.0)
$ rnpm install react-native-youtube
$ add YTPlayerView-iframe-player.html from Assets to your xcode project
Open AppDelegate.m and add :
-
#import <AVFoundation/AVFoundation.h>
-
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error: nil];
in your didFinishLaunchingWithOptions method
In node_module :
$ git clone https://github.com/inProgress-team/react-native-youtube.git
Then add in settings.gradle :
include ':RCTYouTube', ':app'
project(':RCTYouTube').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-youtube/RCTYouTube')
In build.gradle : ( The one inside android/app . NOT android/build.gradle )
dependencies {
[...]
compile project(':RCTYouTube') // From node_modules
}
In MainApplication.java :
import com.inprogress.reactnativeyoutube.ReactNativeYouTube;
[...]
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ReactNativeYouTube()
);
}
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.
- Param Aggarwal (paramaggarwal@gmail.com)
- Ownership has been transfered to inProgress-team
MIT License