Closed eliaslecomte closed 3 months ago
You can work around this by disabling overscroll: <ScrollView overScrollMode="never">
.
right, this is an issue with react-native-webview.
I'll add this to the FAQs section on the documentation page. seems very similar to the navigation crash
The following solution worked for me to workaround this problem:
Link to suggested solution: https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253
<YoutubePlayer
...
webViewStyle={styles.webView}
/>
const styles = StyleSheet.create({
webView: Platform.select({
// Fix crash on Android devices that use overscroll.
// The webview inside the youtubeplayer causes a crash when the
// parent scrollview scrolled to the top or bottom and causes a
// overscoll effect. Setting the opacity to 0.99 on Android
// prevents this problem.
// https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253
android: { opacity: 0.99 },
default: {},
}),
});
@IjzerenHein solution works to prevent crashing, but for some reason on certain android devices, setting the WebView
opacity to 0.99 causes the entire web view to be hidden altogether. A solution I found that works to prevent crashing and still show the webview on all my test devices is by setting the the androidLayoutType
of the WebView
to software instead:
<YoutubePlayer
...
webViewProps={{androidLayerType: 'software'}}
/>
You can work around this by disabling overscroll:
<ScrollView overScrollMode="never">
.
Thank you, you save my day <3
@IjzerenHein solution works to prevent crashing, but for some reason on certain android devices, setting the
WebView
opacity to 0.99 causes the entire web view to be hidden altogether. A solution I found that works to prevent crashing and still show the webview on all my test devices is by setting the theandroidLayoutType
of theWebView
to software instead:<YoutubePlayer ... webViewProps={{androidLayerType: 'software'}} />
It's fixing the crash for me thanks, the video is playing but I can't see the content it stay dark... If I click on full-screen I can see the content
<YoutubePlayer ... webViewProps={{androidLayerType: 'software'}} />
Work for me
Thanks
Did you manage to find a fix for the black screen?
Did you manage to find a fix for the black screen?
Add a prop
webViewStyle={{ backgroundColor: 'transparent', opacity: 0.99 }}
Route in stack
<Stack.Screen
name="TrainingVideo"
component={TrainingVideo}
options={{
animation:'none', //<=
headerTitle: 'Treinamento',
headerTitleAlign: 'center'}} />
This has just been fixed 3 weeks ago with the new release of react-native-webview v13.6.2. I'm runnin gon Expo 48 and React Native 71 (without Hermes) that comes with v11.26.0 by default, updating it to v13.6.2 didn't seem to have any issues.
All earlier solutions (bg transparant, opacity 0.99, layertype software) etc. fixed the crash for me, but the video remained black (OnePlus 8T). That also seems to have been fixed.
The pull request: https://github.com/react-native-webview/react-native-webview/pull/2874
The changelog of the webview release: https://github.com/react-native-webview/react-native-webview/releases/tag/v13.6.2
The comment that made me find the pull request: https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-1454802926
a few solutions are mentioned here : https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash
Describe the bug When the YoutubePlayer is rendered inside a list (tested with ScrollView), and the user overscrolls this list, the app crashes, if the video is playing, but not visible on the screen.
This happens on Android 12 that has the new overscroll effect that stretches all list items https://www.youtube.com/watch?v=2kIBdet_IKE.
To Reproduce
Smartphone (please complete the following information):
react-native-youtube-iframe
2.2.2react-native-webview
11.15.0Additional context Stacktrace: