Skip to content

App crashing when navigating to new screen #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
darriuk opened this issue Feb 16, 2021 · 9 comments
Closed

App crashing when navigating to new screen #110

darriuk opened this issue Feb 16, 2021 · 9 comments

Comments

@darriuk
Copy link

darriuk commented Feb 16, 2021

Description
The YoutubePlayer causes a crash immediately on navigating to another screen, and also sometimes when navigating to the screen that contains the component.

Error
No errors in the console or reported on the device by the OS. The app simply closes silently.

Testing environment
Device: real 64 bit Nokia device
OS: Android 10
React-native: 0.63.3

@darriuk
Copy link
Author

darriuk commented Feb 16, 2021

OK I have a fix for this.

It's a crazy bug in the WebView library where the fix is to set its opacity to 0.99.

This completely fixed it for me:

<YoutubePlayer 
...
    webViewStyle={ {opacity:0.99} }
/>

@darriuk darriuk changed the title Crashes app when navigating to new screen App crashing when navigating to new screen Feb 16, 2021
@LonelyCpp
Copy link
Owner

LonelyCpp commented Feb 16, 2021

yep, it is related to webview opacity and animations.

During a screen transition, react-navigation animates the opacity of the whole screen (including the webview, and only in android) and promptly crashes it.

Another alternative to your solution is to change or remove the default navigation animation on screens that have webviews in them.

More info here - #101

@chichilatte
Copy link

The 99% opacity trick was working for us. Except on Android 5 (and below) where we were getting a white space instead of the video player. We needed to add...

import {Platform} from 'react-native';
...
<YoutubePlayer
    webViewProps = {
        {
             androidLayerType:  Platform.OS==="android" && Platform.Version<=22 ? "hardware" : "none" 
        }
    }
...
/>

More info on androidLayerType here. We're still unsure whether we should use "hardware" or "software", since some webview hardware rendering has given us crashes in the past.

Our setup: RN 0.63.3, react-native-youtube-iframe 1.4.1

@1sanguk
Copy link

1sanguk commented May 11, 2021

OK I have a fix for this.

It's a crazy bug in the WebView library where the fix is to set its opacity to 0.99.

This completely fixed it for me:

<YoutubePlayer 
...
    webViewStyle={ {opacity:0.99} }
/>

This actually works for my project.
Thx for solving my problem

@gustavohcastro
Copy link

OK I have a fix for this.

It's a crazy bug in the WebView library where the fix is to set its opacity to 0.99.

This completely fixed it for me:

<YoutubePlayer 
...
    webViewStyle={ {opacity:0.99} }
/>

This bug are insane, how its possible, lol

Thanks for the solution, works for my project too!!!

@philosophicalfly
Copy link

No F way opacity fixes it

@francoangulo
Copy link

OK I have a fix for this.

It's a crazy bug in the WebView library where the fix is to set its opacity to 0.99.

This completely fixed it for me:

<YoutubePlayer 
...
    webViewStyle={ {opacity:0.99} }
/>

Crazy but fixed ¯_(ツ)_/¯

Thanks for the solution!

@dybdeskarphet
Copy link

Why the f does opacity fix this?

@murrayee
Copy link

OK I have a fix for this.

It's a crazy bug in the WebView library where the fix is to set its opacity to 0.99.

This completely fixed it for me:

<YoutubePlayer 
...
    webViewStyle={ {opacity:0.99} }
/>

niubility

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants