Closed Invertisment closed 11 months ago
mehul2013
commented
3 years ago I am also getting this crash error in Android real device only. Environment: react-native version: 0.63.4 react-native-webview version: 11.2.3 Mobile OS: Android 11 Mobile: Samsung A50
In older Version of Android, It's working fine. Let me know if any solution for this.
mehul2013
commented
3 years ago Hello @Invertisment , I have found the solution for this issue as below: Use navigationOptions: { animationEnabled: false } for 4.X react-navigation version and Use options={{animationEnabled: false}} for 5.x react-navigation version. Please refer this: https://github.com/LonelyCpp/react-native-youtube-iframe/issues/101#issuecomment-768052900
Invertisment
commented
3 years ago Thank you.
I decided to use a different library that shows the WebView in a different way. I may come back to this one some day later as I didn't want to spend too much time on it.
Let the owners of WebView decide whether to close this issue. They may want to at least be aware of it.
pepemiso16
commented
3 years ago @mehul2013 , I've tried options={{animationEnabled: false}} but it seems that it is not working for the latest versions of Android.
pepemiso16
commented
3 years ago @Invertisment may I ask what library did you use for WebView?
mehul2013
commented
3 years ago @pepemiso16 I hope you are using WebView inside View and others properties like opacity:0.99 in style, injectedJavaScript, useWebKit. You can refer below sample:
Set WebView inside View:
<View>
<WebView
ref={(ref) => (this.WebView = ref)}
useWebKit={true}
source={{html: htmlContent}}
scrollEnabled={false}
useWebKit={true}
originWhitelist={['*']}
style={{
height: webViewHeight,
backgroundColor: 'transparent',
marginHorizontal: 20,
opacity: 0.99,
}}
javaScriptEnabled={true}
onMessage={this.onWebViewMessage}
injectedJavaScript={webViewScript}
/>
</View>Set injectedJavaScript:
const webViewScript = `
setTimeout(function() {
window.ReactNativeWebView.postMessage(document.body.scrollHeight)
}, 500);
true; // note: this is required, or you'll sometimes get silent failures
`;Set dynamic Height:
onWebViewMessage = (event) => {
this.setState({webViewHeight: Number(event.nativeEvent.data)});
};I am hoping that above code may resolve your issue.
pepemiso16
commented
3 years ago @mehul2013 seems that that one didn't work. Thanks though.
Invertisment
commented
3 years ago @Invertisment may I ask what library did you use for WebView?
Instead of this recaptcha3 lib: https://github.com/jarden-digital/react-native-recaptchav3 I used this recaptcha2 library: https://github.com/xuho/react-native-google-recaptcha-v2. It uses the same WebView but it opens it on a click of the user. And somehow it doesn't crash so I hope that it won't. So somehow the crash is related to the way the first library loads the WebView. I'm not sure.
These libraries are not interchangeable, recaptcha_v2 and recaptcha_v3 are a different thing.
AbdulmalickDimnang
commented
3 years ago a workaround is to set the style of WebView to opacity: 0.99, to prevent the crash
ericlathrop
commented
3 years ago The workaround that worked for me was:
...
<Stack.Navigator
screenOptions={{
animationEnabled: Platform.select({
ios: true,
android: false,
}),
...
Nomaddis
commented
3 years ago I also was faced with a crash when I was trying to navigate to a non-webview component. The solution for me was to add the androidLayerType prop inside the WebView component
<WebView
androidLayerType="software"
....//....
/>
ROG3R-DEV
commented
3 years ago on react-navigation
options={{ cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS }}
this worked for me.
all iOS options work.
<Stack.Screen
name="MyTestScreen"
options={{
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
}}
>
LonelyCpp
commented
3 years ago It looks like android 12 (SDK 31) has a "bounce" animation for scrollviews. This also triggers the crash ☹️
fortunately the opacity workaround still works.
Invertisment
commented
3 years ago @LonelyCpp, you didn't mention any new evidence.
Also this is what the before-mentioned PR is about: https://github.com/newsuk/times-components-native/pull/462
gp3gp3gp3
commented
2 years ago Another solution to fix this is to mount the html view after the interaction manager is complete.
const [isFocused, setIsFocused] = useState(false)
const navigation = useNavigation()
useFocusEffect(
useCallback(() => {
InteractionManager.runAfterInteractions(() => setIsFocused(true))
}, [])
)
// This is needed to make sure the component is removed from the dom
// before the navigation animation starts
useEffect(
useCallback(() => {
const unsubscribe = navigation.addListener('beforeRemove', () => {
setIsFocused(false)
})
return unsubscribe
}, [])
)
return (
<>
{isFocused ? <WebView {...yourProps} /> : <LoadingView />}
</>
)
markstreich
commented
2 years ago It looks like android 12 (SDK 31) has a "bounce" animation for scrollviews. This also triggers the crash ☹️
fortunately the opacity workaround still works.
Also started getting crashes on Android 12 recently, seems to be related to WebViews inside a ScrollView (the new overscroll effect)
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR)
SkSurface::getCanvas()<ScrollView overScrollMode="never" seems to fix it too
lucasfronza
commented
2 years ago Thanks, @markstreich. <ScrollView overScrollMode="never" fixed it for us as well.
Tip: If you want to disable it globally, the easiest way is probably to do it in your styles.xml file.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
{...}
<item name="android:overScrollMode">never</item>
</style>Reference: https://stackoverflow.com/a/17283061
garrettm
commented
2 years ago Many thanks for the quick fix, is there a longer term solution somewhere which allows overscroll to remain enabled?
rlemasquerier
commented
2 years ago Thanks @markstreich, I prefer your workaround because it seems to me that androidLayerType="software" actually has a very bad impact on performances.
LucasHimelfarb
commented
2 years ago I also was faced with a crash when I was trying to navigate to a non-webview component. The solution for me was to add the androidLayerType prop inside the WebView component
<WebView androidLayerType="software" ....//.... />
Its work! Thanks a lot
linxianxi
commented
2 years ago opacity=0.99 or react-navigation animationEnabled=false works for me.
androidLayerType="software" has a very bad impact on performances.
overScrollMode ="never" is invalid because I'm not using scrollView
hejun041
commented
2 years ago
opacity=0.99或反应导航animationEnabled=false对我有用。androidLayerType="software"对表演有非常不好的影响。overScrollMode ="never"无效，因为我没有使用 scrollView
添加在WebView的属性上
github-actions[bot]
commented
2 years ago Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically
SleeplessByte
commented
2 years ago Since no related PR was merged, this is likely not stale.
andreialecu
commented
2 years ago I can confirm that I'm still seeing crash reports on Sentry due to this. opacity: 0.99 did not seem to resolve it in our case the last time I tried it.
finalight
commented
2 years ago any other solutions that might be able to fix it?
lelukas
commented
2 years ago I got this error as well. Disabling react-navigation animations worked for me, but <WebView androidLayerType="software" /> also did the trick, and I didn't have to disable all the animations for Android.
github-actions[bot]
commented
1 year ago Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically
SleeplessByte
commented
1 year ago It's not fixed.
andreialecu
commented
1 year ago Made a repro for this in #2771
Vidhyasagar731
commented
1 year ago <Stack.Screen options={{ animation:"none" }} />
worked for me.
andreialecu
commented
1 year ago This is finally fixed by #2874. PR is not yet merged, but we've been successfully using those changes using patch-package.
github-actions[bot]
commented
1 year ago Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically
bob27aggiustatutto
commented
1 year ago Not fixed yet
UsmanZulfi
commented
1 year ago Facing this Issue, Is there anyone to help with this. I tried almost every solution on the Internet and nothing solve my problem. RN version : 0.69.9 RNW version : 8.0.4
EmilianoMorghen
commented
1 year ago It's still happening, Android 13 (SDK 33). Conditionally rendering the webview after the navigation occured seems to fix some of the scenarios where the app crash but not all of them.
shubhampvx
commented
1 year ago Use renderToHardwareTextureAndroid={true} in view or scrollview and wrap the webview in it . This works for me , so you guys can try it as well
github-actions[bot]
commented
1 year ago Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically
hejun041
commented
1 year ago 这是来自QQ邮箱的假期自动回复邮件。 您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。
github-actions[bot]
commented
11 months ago Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically
danish1658
commented
10 months ago for react navigation v6 and >
options={{ animation: 'none' }}
watadarkstar
commented
7 months ago This issue still exists but the opacity workaround worked for me:
import { forwardRef } from "react"
import { StyleSheet } from "react-native"
import { WebView, WebViewProps } from "react-native-webview"
const CustomWebView = forwardRef((props: WebViewProps) => {
return <WebView {...props} style={styles.webView} />
})
export default CustomWebView
const styles = StyleSheet.create({
webView: {
opacity: 0.99,
},
})
Bug description:
I tried to use this library: https://github.com/jarden-digital/react-native-recaptchav3. It uses JS in a
WebViewto fetch a captcha token from the web.When I render the component then initially nothing bad happens and everything works. I get the captcha token and I can use it later. The error happens when I get the token and go back to a previous app screen (not
WebViewpage) which destroys theWebView. When I rererender theWebViewthen the app exits due to an error.I consider this a normal use as I want to create a form that has a captcha where user can go back and retry at any time.
Related issues: I get a different stacktrace than https://github.com/facebook/react-native/issues/25494. One user posted a similar stack trace to mine in that same thread: https://github.com/facebook/react-native/issues/25494#issuecomment-516324822. I think that stacktrace is related to this issue as the library from his stacktrace is a different one than OP's and the same as from my stacktrace.
I also registered this issue: https://github.com/jarden-digital/react-native-recaptchav3/issues/14. But as it's a more general issue I decided to register one here as well.
I think these people have a fix for a similar crash but it didn't work for me: https://github.com/celo-org/celo-monorepo/blob/db83744270f29ec748cdee422f08d3e9c4c40af7/packages/mobile/src/components/WebView.tsx
I can't catch this error using an
ErrorBoundarycomponent as it instantly kills the whole app. It's an error outside of JS.This didn't help:
hardwareAccelerationDisabledAndroid={true}, this didn't help too:style={{opacity: 0.99}}.To Reproduce: Use recaptcha component from the library as it's intended in the README file. This should also impact other similar libraries. Not only the ones intended for captchas.
Regular use:
The crash persists if I switch to a different activity via
onPause:The crash doesn't persist if I kill the app completely (prevents the crash for the next render):
Expected behavior: Rerendering and
onPause+onResumeshould not result in a crash.Screenshots/Videos: I have this stack trace from logcat:
Environment:
5.10~0.63.4^11.2.4Devices I tested: Android emulator with API 30 - crashes Android emulator with API 29 - crashes Android emulator with API 27 - works Android physical with API 21 - works (android 7.0)