Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
react-native-youtube
Advanced tools
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
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 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.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 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. Default true
.origin
: This parameter provides an extra security measure for the IFrame API.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
.seekTo(seconds)
: Seeks to a specified time in the video(requires react-native >= 0.6.0)
npm install react-native-youtube --save
Libraries
and click Add Files to "Your Project Name"
:
RCTYouTube.xcodeproj
from the node_modules/react-native-youtube
folder in Finder.libRCTYouTube.a
to Build Phases -> Link Binary With Libraries
:
.YTPlayerView-iframe-player.html
asset file to project and to Build Phases -> Copy Bundle Resources
var YouTube = require('react-native-youtube');
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)
MIT License
FAQs
A <YouTube/> component for React Native.
The npm package react-native-youtube receives a total of 4,447 weekly downloads. As such, react-native-youtube popularity was classified as popular.
We found that react-native-youtube demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.