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.

[desaiparv5]

const HomeScreen = ({ navigation }) => {
  const [isRefreshing, setIsRefreshing] = useState(false)
  const modal = useRef()
  const _handleLongPress = () => {
    modal.current.open()    
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.listContainer}>
        <FlatList
              renderItem={({index, item, separators})=>(
            <TouchableOpacity              onLongPress={()=>{_handleLongPress()}} >
               <Text></Text>
            </TouchableOpacity>
          )}
          refreshing={isRefreshing}
          onRefresh={()=>{_handleRefresh()}}
        />
      </View>
      <Modal
        ref={modal}
        position={"bottom"}
        style={styles.modal}
      >
        <Text>...</Text>
       </Modal>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({...});
export default HomeScreen;

[albarkahdev]

i still face this issue, and none of those solution above work for me. Anyone have other solution for this?

[Solid-Metal]

hello everyone, i also got this crash, but i found a solution, @gawrysiak answer is correct, but its not working for me whatever i did, but i still force it to rerender, just disabling and enabling the component is enough

example: { this.state.showModal && <Modal ref={modal} onClosed={()=>{this.setState({showModal : false})}} > <Text> SHOW MODAL </Text> </Modal> } and it works for me

[zarttash]

Thank you guys @Solid-Metal @Michaelvons . I have applied the both and the trick worked. I think the problem is with @react-navigation/material-bottom-tabs because on other screens working perfect.

[rifansyah]

I got my fixed without sacrificing the close transition. but it's at the library side https://github.com/maxs15/react-native-modalbox/pull/340

hope it'll help