WebView Crashing

[asutariyadigit]

Hi My App crashing the below Error:
com.facebook.react.views.view.ReactClippingViewManager.getChildCount
java.lang.ClassCastException - com.reactnativecommunity.webview.d cannot be cast to com.facebook.react.views.view.ReactViewGroup

To Reproduce: if we Continue move between From Webview to View Component by Pressing hardware back button.

Expected behavior:

Screenshots/Videos:

Environment:

• OS:MacOS 14.2.1
• OS version:
• react-native version:0.70.6
• react-native-webview version: "react-native-webview": "^13.2.2",

Fatal Exception: java.lang.ClassCastException: com.reactnativecommunity.webview.d cannot be cast to com.facebook.react.views.view.ReactViewGroup
at com.facebook.react.views.view.ReactClippingViewManager.getChildCount()
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:70)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.dropView(NativeViewHierarchyManager.java:104)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.dropView(ReanimatedNativeHierarchyManager.java:7)
at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:304)
at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.manageChildren(ReanimatedNativeHierarchyManager.java:13)
at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:14)
at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:135)
at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:53)
at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java)
at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:31)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:46)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:2)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1140)
at android.view.Choreographer.doCallbacks(Choreographer.java:946)
at android.view.Choreographer.doFrame(Choreographer.java:870)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1127)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loopOnce(Looper.java:210)
at android.os.Looper.loop(Looper.java:299)
at android.app.ActivityThread.main(ActivityThread.java:8292)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:556)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1045)

[netmaxt3r]

@asutariyadigit looks like you have reanimated , can you post your jsx view hierarchy?

[asutariyadigit]

@netmaxt3r Please find JSX structure.

return (
<>
<View style={{ marginTop: StatusBar.currentHeight, marginBottom: 0 }}>
<Header
homeScreen={true}
navigateHome={true}
isProgressBarShown={false}
leftActionPress={() => {
this.props.navigation.openDrawer();
}}
/>

    <StatusBar
      barStyle="dark-content"
      hidden={false}
      backgroundColor="#ffffff"
      translucent={true}
    />
    <WebView
      ref={(ref) => (this.WEBVIEW_REF = ref)}
      source={{ uri: redirectionLink }}
      onNavigationStateChange={(event) =>{
        var url = event.url;
        this.onNavigationStateChange(event);
          if(url.includes("/KYC")){
          this.props.navigation.navigate("KYCScreen", {kycUrl : url, flow : 'mmmmmm', data : this.state.afData });
        }
      }
    }
      javaScriptEnabledAndroid={true}
      javaScriptEnabled={true}
      automaticallyAdjustContentInsets={false}
      startInLoadingState={true}
      removeClippedSubviews={true}
      allowsBackForwardNavigationGestures={true}
      // injectedJavaScript={hideHeaderInWebView}     script.
      onLoadProgress={(progress) => {
        console.log("progress", progress);
        if (this.state.url !== progress.nativeEvent.url)
          this.onNavigationStateChange(progress.nativeEvent);
      }}
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        onErrorhandler(nativeEvent);
        this.props.navigation.goBack();
      }}
      onMessage={(data)=>{ this.triggerEvents(data)}}
      setSupportMultipleWindows={false}
      onShouldStartLoadWithRequest={event => this.onShouldStartLoadWithRequest(event)}
       renderLoading={() => {
         return <Spinner animating />;
       }}
    />
  </>
);

}
}

[asutariyadigit]

[asutariyadigit]

@netmaxt3r @alloy Please any solution?

[netmaxt3r]

@asutariyadigit i am not able to reproduce the issue with code you have provided works fine with bare project and your code ( with minor modifications ). the root cause must be somewhere else, with your higher wrapping components. where does your View import is from? is it animated View ? if yes try changing to View from react-native

[asutariyadigit]

@netmaxt3r Thanks for your response View is not imported from animated view it is taken only View from react-native.To Reproduce:** if we Continue move between From Webview to View Component by Pressing hardware back button.

[netmaxt3r]

if we Continue move between From Webview to View Component by Pressing hardware back button

that suggests you need to look into your navigation setup, try turn off any animation you have between screen navigation, update reanimated library and check

[asutariyadigit]

Hi @netmaxt3r stop animation in Stack navigator as well individual component but still have issue

[netmaxt3r]

@asutariyadigit sorry mate i have no other suggestion to help you out of this crash :(