React Native StackOverflowException

Question

I'm having the following exception in my react-native app on Android

E/unknown:ReactNative: Exception in native call
    com.facebook.react.uimanager.IllegalViewOperationException: StackOverflowException
        at com.facebook.react.ReactRootView.handleException(ReactRootView.java:563)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:669)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.draw(View.java:14468)
        at android.widget.FrameLayout.draw(FrameLayout.java:472)
        at android.widget.ScrollView.draw(ScrollView.java:1603)
        at com.facebook.react.views.scroll.ReactScrollView.draw(ReactScrollView.java:354)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:663)
        at android.view.View.draw(View.java:14468)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.getDisplayList(View.java:13357)
        at android.view.View.getDisplayList(View.java:13404)
        at android.view.View.draw(View.java:14182)
        at android.view.ViewGroup.drawChild(ViewGroup.java:3103)
        at android.view.ViewGroup.dispatchDraw(ViewGroup.java:2940)
        at android.view.View.draw(View.java:14468)
        at android.widget.FrameLayout.draw(FrameLayout.java:472)
        at android.widget.HorizontalScrollView.draw(HorizontalScrollView.java:1609)
        at com.facebook.react.views.scroll.ReactHorizontalScrollView.draw(ReactHorizontalScrollView.java:275)
        at android.view.View.getDisplayList(View.java:13362)
        at android.view.View.getDisplayList(View.java:13404)
        at android.v

I have the following versions in my React-Native app:

react-native: 0.55.3
react: 16.3.1
Android: 4.4.2

The main problem is that, this exception does not have a certain case, it just happens anywhere in the app. For example, while you've been in the app for a while, and then try to go to a screen, it crashes with this exception.

I have searched a lot about IllegalViewOperationException.

https://github.com/facebook/react-native/issues/13984 -> The issue here suggest to remove LayoutAnimation however I've totally removed it from my project and I'm still facing the issue.

com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag -> the exception here seems to be caused by another reason, in my case I don't have an unknown view tag issue

I have searched a lot about StackOverflowException in react-native, but even in it's GitHub issues, there are zero results.

I've also checked Exception in native call error. For example, in this link, E/unknown:React: Exception in native call, the issue is caused by bundling. However my case is not related to bundling. I can successfully run the app in the emulator and navigate among screens. The exception also occurs in release mode on real devices too.

I'm unable to find an answer including Exception in native call, IllegalViewOperationException, and StackOverflowException keywords. The exception occurs on Android devices with only 4.x version. It does not occur on 5 and higher Android versions. I guess that it might be related to device's insufficient RAM, or the device might not handle too many renderings in consecutive page navigations. Any ideas on how I can prevent this exception?

I am seeing this `IllegalViewOperationException` stack overflow issue as well. I checked my `adb logcat` log for relevent lines and found [this](https://gist.github.com/Ashoat/2ac198ae97001b33c70001392b06b1b1). "stack overflow on call to Landroid/text/SpanSet" — Ashoat, May 10 '19 at 18:53
Stackoverflowexception means the stack is full - too many function calls can consume the stack. Check the call graph and see if there's some function which is called too many times. — kiner_shah, Jan 15 '22 at 09:02

score 0 · Answer 1 · answered Jan 19 '22 at 20:28

Likely you have a recursive operation forcing re-renders.

https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

  @Override
  protected void dispatchDraw(Canvas canvas) {
    try {
      super.dispatchDraw(canvas);
    } catch (StackOverflowError e) {
      // Adding special exception management for StackOverflowError for logging purposes.
      // This will be removed in the future.
      handleException(e);
    }
  }

https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java

the dispatchDraw method is part of the android SDK. Is the part of the view system that allows to draw other views inside a viewGroup (a root component). By the very nature of the process (because a ViewGroup is also a View, you can nest infinite view trees inside the root), a StackoverflowException (VM ran out of memory space to place another call) is possible. React-Native relies on a custom view component, ReactRootView, which throws the exception you see if an infinite/way too expensive view tree is rendered. The structure of an RN app is an android activity, with a ReactRootView (framelayout subclass), which houses everything you add in JS. Every screen. So if one of your screen rendered way too many times & you render another, you get to the point where the ReactRootView overflows the memory stack & presto, exception.

You see this on older phones either because the device specs are below the stress your render process exerts over it, or because a particular bug on the view-generation code of RN is exposed on 4.4.2.

Try render-evaluation tools like why-did-you-render to detect unwanted rendering cycles. Otherwise you need to slim down the amount of renders.

React Native StackOverflowException

1 Answers1