React-native-youtube: [iOS] Displaying white box instead of video

[haani104]

Hi,

I am using this for iOS app. I have already ran the link command.
Please find details below

  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-youtube": "^1.1.0"
  },

Below is the code

 <View style={styles.container}>
        <YouTube
          videoId="tmIIOsO95Yw"   // The YouTube video ID
          play={true}             // control playback of video with true/false
          fullscreen={true}       // control whether the video should play in fullscreen or inline
          loop={true}             // control whether the video should loop when ended
          style={{ alignSelf: 'stretch', height: 300 }}
          onReady={e => console.log('onReady has been loaded')}
          onError={e => {
            console.error('error occured') 
          }}
        />
      </View>

Simulator iphone6

On double click on white screen, I see this

Please suggest how to resolve this.

[annop-kongdeedai]

@haani104 Can you please tell, how to solve this problem?

[tameroski]

I had the same issue, @annop-kongdeedai. Figured out it was an installation issue. You have to link the Player's HTML frame to your iOs project's root directory.

[LeonidVeremchuk]

Maybe this info will be useful for any...

Manually import to Xcode (without Podfile).

1) Add library to Xcode

_-Right Click on Libraries dir -> Add Files to "Your Project name"->../node_modules/react-native-youtube/RCTYouTube.xcodeproj_

2) Linking library

_-Add libRCTYouTube.a to Linked Frameworks and Libraries_

3) Manually import YTPlayerView-iframe-player.html

_3.1 copy YTPlayerView-iframe-player.html from ../node_modules/react-native-youtube/assets/ to
YOUR_APP/ios/assets/
3.2. In Xcode Right Click on your root -> Add Files to "Your Project name" - find YTPlayerView-iframe-player.html from your ios/assets/_

I do not know why it is so difficult, but these steps help me.

Player example in app:

render() {
        return <View
            style={{
                alignItems: "center",
                justifyContent: "center",
                margin: 1,
                backgroundColor: 'black'
            }}
        >

            <YouTube
                apiKey={configuration.youtubeApiKey}
                play={true}
                videoId="sY5MmhLQBng"  // The YouTube video ID
                onReady={(e) => console.log('READY', e)}
                onChangeState={e => console.log('STATE', e)}
                onChangeQuality={e => console.log('onChangeQuality', e)}
                onError={e => console.log('onError', e)}
                style={{ width: '99%', alignSelf: 'stretch', height: 220 }}
            />
        </View>
    }

[sushilskycap]

@LeonidVeremchuk You are a life savior

[maskedjellybean]

@LeonidVeremchuk

A few questions about steps 1 and 2:

1) What if RCTYouTube.xcodeproj is greyed out and can't be selected?

2) Where can I find libRCTYouTube.a? When you say "add ... to Linked Frameworks and Libraries", do you mean "Frameworks" and "Libraries" in the left sidebar of Xcode? Should I right click on them and > Add Files to "Your Project name" as in step 1? (After someone tells me where I can find this file.)

[umkhan65]

@maskedjellybean

1. if it is greyed out that means its already imported - it is automatically imported when you use react-native link react-native-youtube
2. no it should be added in "link binary with libraries", if its not showing check if it already exists in the list

[umkhan65]

@LeonidVeremchuk worked for me 👍