React Native - YouTube Player

player.js

import React from 'react'
import YouTube from 'react-native-youtube'
import { withNavigationFocus } from 'react-navigation'

class YTPlayer extends React.Component {
  state = {
    height: 215
  }

  handleReady = () => {
    setTimeout(() => this.setState({ height: 216 }), 500)
  }

  render() {
    const { height } = this.state
    const { id } = this.props
    return (
      <YouTube
        controls={1}
        apiKey=""
        videoId={id}
        resumePlayAndroid={false}
        style={{
          alignSelf: 'stretch',
          width: "100%",
          height: height
        }}
        onReady={this.handleReady}
      />
    )
  }
}

class Player extends React.Component {
  render() {
    const { id } = this.props
    return this.props.isFocused && <YTPlayer id={id} />
  }
}

export default withNavigationFocus(Player)

Fix for: davidohayon669/react-native-youtube#238

Thank you so much!!!

Thanks

it still rectangle black screen.. how can i solve this.. please

it still rectangle black screen.. how can i solve this.. please

import withNavigationFocus and wrap is component
later this.props.isFocused propery true when render Youtube component

I still get a rectangle with a black screen. Better than a crash but not much.

The error occurs almost never in debug mode, some of the time when debug is off and most of the time on production builds.

I still get a rectangle with a black screen. Better than a crash but not much.

The error occurs almost never in debug mode, some of the time when debug is off and most of the time on production builds.

Although I circumvented this problem, I ran into different problems. That's why I chose to use the following package on the android platform: react-native-youtube-iframe

FOR ANDROID

import YoutubePlayer from "react-native-youtube-iframe";
RenderYoutubeAndroid = (props) => {
	const { autoStart, videoUrl, loop, controls, videoHeight } = props
	return (
		<YoutubePlayer
			height={videoHeight || 300}
			play={autoStart}
			videoId={videoUrl || "El3aHfAUbOg"}
			loop={loop}
			controls={controls}
			allowWebViewZoom={true}
			onChangeState={(state) => console.log("RENDER VİDEO : ", state)}
		/>
	)
}

FOR IOS

import YouTube from 'react-native-youtube';
RenderYoutubeIOS = (props) => {
	const { apiKey, videoUrl, autoStart, videoHeight, loop, fullScreen, } = props

	return (
		<YouTube
			videoId={videoUrl || "El3aHfAUbOg"}
			apiKey={apiKey || "YOUR-API-KEY"}
			play={autoStart}
			fullscreen={fullScreen}
			loop={loop}
			style={{ height: videoHeight || 300 }}
		/>
	)
}

That's why I chose to use the following package on the android platform: react-native-youtube-iframe

I've tried that one too. I need the video to start in full screen though and that package doesn't give that opportunity.

The crash I'm experiencing is occurring in line 315 of YoutubePlayerController.java