A React Native module that allows you to play YouTube videos from React Native Apps.
YouTube example video of this lib working on iOS -> https://www.youtube.com/watch?v=rGq_y5pF0xA&feature=youtu.be
NOTE: THIS PACKAGE IS NOW BUILT FOR REACT NATIVE 0.40 OR GREATER! IF YOU NEED TO SUPPORT REACT NATIVE < 0.40, YOU SHOULD INSTALL THIS PACKAGE @0.24
npm install react-native-youtube-player@latest --save
react-native link
IMPORTANT NOTE: You'll still need to perform step 4 and 5 for iOS and steps 2, 3, and 5 for Android of the manual instructions below.
- In the XCode's "Project navigator", right click on your project's Libraries folder ➜
Add Files to <...>
- Go to
node_modules
➜react-native-youtube-player
➜ios
➜ selectRNYoutubePlayer.xcodeproj
- Add
RNYoutubePlayer.a
toBuild Phases -> Link Binary With Libraries
- For iOS verify your ATS configuration
- Drag and Drop "YTPlayerView-iframe-player.html" and "YoutubePlayerViewController.xib" to your main project (in Xcode). Copy those files. You can customize the XIB file in order to localize for example.
- Compile and have fun
-
Add the following lines to
android/settings.gradle
:include ':react-native-youtube-player' project(':react-native-youtube-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-youtube-player/android')
-
Update the android build tools version to
2.2.+
inandroid/build.gradle
:buildscript { ... dependencies { classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version } ... } ...
-
Update the gradle version to
2.14.1
inandroid/gradle/wrapper/gradle-wrapper.properties
:... distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
-
Add the compile line to the dependencies in
android/app/build.gradle
:dependencies { compile project(':react-native-youtube-player') }
-
Add the required permissions in
AndroidManifest.xml
:<uses-permission android:name="android.permission.INTERNET" />
-
Add the import and link the package in
MainApplication.java
:import ar.com.ezequielaceto.reactnative.library.youtubeplayer.YoutubePlayerPackage; // <-- add this import public class MainApplication extends Application implements ReactApplication { @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new YoutubePlayerPackage() ); } }
This code allows to pass result of request permissions to native part.
## Usage
```javascript
var YoutubePlayer = require('react-native-youtube-player');
var options = {
title: 'An example project'
};
YoutubePlayer.playVideo("youtube-video-id", options);
```javascript