React-native-youtube: app crashed when place Youtube component inside a modal "Android"

[smsmdida]

The component renders fine on IOS but on Android it crashes without any errors !

"react": "16.0.0-alpha.6"
"react-native": "0.44.2"

[davidohayon669]

Try logging the console https://facebook.github.io/react-native/docs/debugging.html#accessing-console-logs

I will push a fix for Android on RN > 0.44 the next days

[ishita-kothari]

@davidohayon669 do you have any updates? I am also facing the same problem. I am trying every possible way to run youtube on android but everything fails. Please do provide me a proper solution.

Thanks!

[pallavisingh1511]

@davidohayon669 Has this been fixed yet?

[davidohayon669]

@pallavisingh1511 I don't understand the problem

[pallavisingh1511]

@davidohayon669
So, I've a button on the home screen. Upon clicking that button a modal appears and a video plays in that modal.
Now, this setup works perfectly fine on iOS.
But on Android, the app crashes whenever the modal opens.

react-native: 0.45.1

[davidohayon669]

@pallavisingh1511 what home screen? what is a modal and how is it mounted and displayed?
provide more code

[smsmdida]

Guys I fixed that by using react-native-popup-dialog rather than react native built in modal

[pallavisingh1511]

Hey @davidohayon669,
Following is the code.
Here, when the image is pressed, the modal opens and plays the video.
On iOS it works as expected, while on android the app crashed once the image is pressed.

` this._playVideo(!this.state.modalVisible)
}}>


animationType={"slide"}
transparent={true}
visible={this.props.visible}
onRequestClose={() => {this.props.playVideo(false)}}
>


ref={(component) => {
this._youTubeRef = component;
}}

        apiKey="apiKey"
        videoId={this.props.videoId}
        play={this.state.isPlaying}
        loop={this.state.isLooping}
        fullscreen={this.state.fullscreen}
        controls={1}
        style={styles.player}
        onError={e => this.setState({ error: e.error })}
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onChangeFullscreen={e => this.setState({ fullscreen: e.isFullscreen })}
        onProgress={Platform.OS === 'ios'
        ? e => this.setState({ duration: e.duration, currentTime: e.currentTime })
        : undefined}
    />
</View>

`

[davidohayon669]

Log for any error on onError, and log the device / emulator console with react-native log-android

[lra-tapptic]

[davidohayon669]

[lra-tapptic]

[pallavisingh1511]

[davidohayon669]

[pallavisingh1511]

[pallavisingh1511]

[davidohayon669]

[pallavisingh1511]

[davidohayon669]

[pallavisingh1511]

[die20]

[swingywc]

[wedowebapps]

[david-Ken]

[MssMaster]

[codemobiles]