[iOS] Displaying white box instead of video

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.

[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>
    }

[umkhan65]

@LeonidVeremchuk worked for me 👍