React-native-youtube: Not working on Android

[Kendokai]

I've implemented successfully in ios but it not working in android. I've added API key but don't know it correct or not because it accepted any value So I can't sure it not working because wrong API key or my code. Can someone provide full tutorial on this implementation ?
<YouTube apiKey="AIzaSyCZs5LGQYP8EL8uQvvpO6SA-cFZs8kHw30" ref="youtubePlayer" videoId="tAawfiPaTbY" play={false} hidden={false} fullscreen={true} loop={false} style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}} /> </View>

[TheIndianRaj]

Same problem. Working with iOS, but not android.

[a8c71]

Same issue here.

"react-native": "0.43.4", "react-native-youtube": "^1.0.0-alpha.3",

[davidohayon669]

@choungchamnab Try to log any error that you might get with the onError event callback. Nevertheless its a good practice to use onError on such a module that depends on external factors like a correct API Key or the existence of a YouTube app on the device

Plus you just published your API Key on the internet

[diogoperillo]

I get NO_SERVICE error.. or something like that...

[wcandillon]

I'm getting SERVICE_MISSING on android.

[davidohayon669]

@wcandillon @diogoperillo SERVICE_MISSING means there is no YouTube app present on the device. You must have the official YouTube app installed on the device to work with the Android plugin.

[a8c71]

onError is not displaying a message for me, instead a warning at the begining is shown:
Warning: Native component for "ReactYouTube" does not exist

Youtube App is installed in the Android devices I've tested, iOS is working as intended.
Any ideas?

[oskarrough]

@a8c71 I believe you have to run react-native link after yarn/npm install.

[a8c71]

@oskarrough I already did that, as its working in iOS.
Reinstalled node packages and relinked as well with no luck.

[davidohayon669]

@a8c71 try setting up the example in this repo and see if the same behavior persist

[a8c71]

@davidohayon669 The example did not work for me on Android, the video view shows the same as in my App (black screen, red bar on the left border).

I ended up using WebView for the Android case, not ideal but works for now.

[bbeckk]

same issue here in android device. black screen, red bar on the left border. Ps. I've youtube player installed in my device.
Warning :

1. Native component for "ReactYouTube" does not exist
2. View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.
3. BackAndroid is deprecated. Please use BackHandler instead.

[davidohayon669]

@bbeckk Did you connected the libraries with react-native link?

[ghost]

@bbeckk I got the same issues as you. I solved it by adding this line:
compile project(':react-native-youtube')
inside android\app

[madhuA14]

I had same issue solved with below steps,

settings.gradle
include ':node_modules'
include ':react-native-youtube'
project(':react-native-youtube').projectDir = new File(rootProject.projectDir, '/node_modules/react-native-youtube/android')

app/build.gradle
compile project(':react-native-youtube')

addPackage(new ReactNativeYouTube()) in your MyReactActivity.

[davidohayon669]

@madhuA14 This is exactly what react-native link does

[victor-axelsson]

I had the same issue. I logged onError and got a Warning: Native component for "ReactYouTube" does not exist error.

I did run the react-native link but it seems like it didn't fix all issues for me.

Im my MainApplication I needed to add the ReactNativeYouTube to the react packages list. I use the following versions (from my package.json):

    "react": "16.0.0-alpha.12",
    "react-native": "0.46.1",
    "react-native-youtube": "^1.0.0-beta.1",

And my MainApplication now looks like this:

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new ReactNativeYouTube(), /// <- here I added the package, which wasn't added before.
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

[aashkafirst]

running command:
react-native link react-native-youtube
works for me!!!
No need to make changes in any file manually, the above command links it...

[martinchristov]

@victor-axelsson your solution works! But you forgot to mention you need to include at the top of MainApplication.java:

import com.inprogress.reactnativeyoutube.ReactNativeYouTube;

Thanks <3

[MrBrownser]

Hi, in case anyone is having this compiling error: _package com.inprogress.reactnativeyoutube does not exist_ error, I finally could make it work in Android.
From @madhuA14 I realized the linking is not adding the dependency to compile. Obviously I did before react-native link and rnpm link as stated in README, with no success. So:

app/build.gradle

[...]
dependencies {
  compile project(':react-native-youtube')
[...]

Btw both react-native link and rnpm link commands should target this module:
react-native link react-native-youtube
rnpm link react-native-youtube
Otherwise you will link again ALL your native modules.

Versions:
react-native: 0.46.4
react-native-youtube: 1.0.1

[stevemu]

Here is what worked for me:

react-native link

in android/settings.gradle:

add following before include ':app'

include ':react-native-youtube'
project(':react-native-youtube').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-youtube/android')
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')

in android/app/build.gradle:

add following in dependencies:

compile project(':react-native-youtube')
compile project(':react-native-fs')

In MainApplication.java:

import com.inprogress.reactnativeyoutube.ReactNativeYouTube;

add following in return Arrays.asList:

new ReactNativeYouTube(),
new RNFSPackage()

in package.json:

"react-native-fs": "^2.8.1",

[adamski]

Dear contributors, the manual installation steps above should be in the README. Some of us need to install modules manually.

@stevemu I also needed to add import com.rnfs.RNFSPackage; to MainApplication.java.
Also I realised the the RNFS package should only be needed for playing local videos, is that correct?

[dasDeepankar]

@victor-axelsson @martinchristov comments solved my issue.