Modal opens once

[peersahab]

The modal opens correctly the first time, but when I close and try to open it again, the app crashes.
Same issue when I try to open a different modal after successfully opening the first one

[gerow-x]

react native version:0.57.3

java.lang.ArrayIndexOutOfBoundsException: length=4; index=4
at com.facebook.react.uimanager.ViewGroupDrawingOrderHelper.getChildDrawingOrder(ViewGroupDrawingOrderHelper.java:99)
at com.facebook.react.views.view.ReactViewGroup.getChildDrawingOrder(ReactViewGroup.java:462)
at android.view.ViewGroup.getAndVerifyPreorderedIndex(ViewGroup.java:1733)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3510)
at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:697)
at android.view.View.updateDisplayListIfDirty(View.java:16166)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3718)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3698)
at android.view.View.updateDisplayListIfDirty(View.java:16134)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:648)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:654)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:762)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3265)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3073)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2680)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1719)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6901)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:874)
at android.view.Choreographer.doCallbacks(Choreographer.java:686)
at android.view.Choreographer.doFrame(Choreographer.java:621)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:860)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6144)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

[Manoj002]

Im facing the exactly same issue, app crashes when i try to open the modal second time...

[gawrysiak]

iOS seems to be fine. Android breaks on second try. That's one of the most stupid workarounds I did, but I was able to resolve it by forcing a re-render

<Modal
  position={'bottom'}
  isOpen={this.state.modal}
  onClosed={() => this.setState({ modal: false })}
  onOpened={() => this.setState({ modal: true })}
  key={this.state.modal ? 1 : 2}
>
  // contents
</Modal>

Works but makes it slower

[Manoj002]

@gawrysiak , thanks for your workaround mahn...
but this is most probably not working

[gawrysiak]

actually it’s fine this way, I’m using it in one app already after my customer reported the error. Just get rid of the ref and make it controlled with the visible state

[onur-dev]

Same error here, this is too boring! Please help :(

[onur-dev]

iOS seems to be fine. Android breaks on second try. That's one of the most stupid workarounds I did, but I was able to resolve it by forcing a re-render

<Modal
  position={'bottom'}
  isOpen={this.state.modal}
  onClosed={() => this.setState({ modal: false })}
  onOpened={() => this.setState({ modal: true })}
  key={this.state.modal ? 1 : 2}
>
  // contents
</Modal>

Works but makes it slower

This is kind of hacky but at least it is working for now... Also i am not experiencing any lag etc... It is working well

[Lucasdsk]

This problem is still happening on React-native v0.59.8, but the workaround proposed by @gawrysiak worked fine to me.

[develgooapps]

Ok, I got stop by this error also and I figured out what was causing it. It looks like modalbox plugin conflicts with other plugins or functions that are using also native Android modals. For instance, in my project everything was working fine until I created a Drawer using React Navigation, which is using a native Modal. When disabling the Drawer, everything worked fine again.

[xjq7]

@gawrysiak That's good ,it's worked for me ,thank you

[tusharkhatiwada]

This simple change fixed my issue: #291

[Michaelvons]

iOS seems to be fine. Android breaks on second try. That's one of the most stupid workarounds I did, but I was able to resolve it by forcing a re-render

<Modal
  position={'bottom'}
  isOpen={this.state.modal}
  onClosed={() => this.setState({ modal: false })}
  onOpened={() => this.setState({ modal: true })}
  key={this.state.modal ? 1 : 2}
>
  // contents
</Modal>

Works but makes it slower

This doesn't work in the latest RN

[Michaelvons]

Hey guys, I found a solution.

https://stackoverflow.com/questions/60216889/react-native-modalbox-crashes-react-native-app-without-error-log/60216890#60216890

[desaiparv5]

This doesn't work for me. The modal does not open after wrapping inside KeyboardAvoidingView

[Michaelvons]

@desaiparv5 Do you have useRef() initialized and assigned to that modal?. Kindly share your code so I can assist.