Modal opens once #248

peersahab · 2018-10-20T09:27:07Z

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 · 2018-10-23T06:15:04Z

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 · 2018-10-29T06:29:15Z

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

gawrysiak · 2018-11-02T14:09:38Z

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 · 2018-11-03T07:41:02Z

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

gawrysiak · 2018-11-04T20:03:58Z

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 · 2019-01-03T15:25:23Z

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

onur-dev · 2019-01-03T15:48:41Z

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 · 2019-06-12T21:35:08Z

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

develgooapps · 2019-07-04T15:25:29Z

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 · 2019-09-19T02:15:38Z

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

tusharkhatiwada · 2019-11-21T18:28:56Z

This simple change fixed my issue: #291

Michaelvons · 2020-02-13T21:44:48Z

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 · 2020-02-13T21:47:20Z

Hey guys, I found a solution.

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

desaiparv5 · 2020-09-06T10:19:25Z

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

Michaelvons · 2020-09-06T12:04:36Z

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

desaiparv5 · 2020-09-09T09:53:56Z

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 · 2020-10-26T07:29:51Z

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

SolidTears · 2020-11-19T15:48:11Z

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-zafar · 2021-03-05T20:17:32Z

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 · 2021-04-22T07:42:24Z

I got my fixed without sacrificing the close transition. but it's at the library side
#340

hope it'll help

tusharkhatiwada mentioned this issue Nov 21, 2019

android app crashes while opening modal second time #290

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal opens once #248

Modal opens once #248

peersahab commented Oct 20, 2018

gerow-x commented Oct 23, 2018 •

edited

Loading

Manoj002 commented Oct 29, 2018

gawrysiak commented Nov 2, 2018

Manoj002 commented Nov 3, 2018

gawrysiak commented Nov 4, 2018

onur-dev commented Jan 3, 2019

onur-dev commented Jan 3, 2019 •

edited

Loading

Lucasdsk commented Jun 12, 2019

develgooapps commented Jul 4, 2019 •

edited

Loading

xjq7 commented Sep 19, 2019

tusharkhatiwada commented Nov 21, 2019

Michaelvons commented Feb 13, 2020

Michaelvons commented Feb 13, 2020

desaiparv5 commented Sep 6, 2020

Michaelvons commented Sep 6, 2020

desaiparv5 commented Sep 9, 2020

albarkahdev commented Oct 26, 2020

SolidTears commented Nov 19, 2020 •

edited

Loading

zarttash-zafar commented Mar 5, 2021

rifansyah commented Apr 22, 2021

Modal opens once #248

Modal opens once #248

Comments

peersahab commented Oct 20, 2018

gerow-x commented Oct 23, 2018 • edited Loading

Manoj002 commented Oct 29, 2018

gawrysiak commented Nov 2, 2018

Manoj002 commented Nov 3, 2018

gawrysiak commented Nov 4, 2018

onur-dev commented Jan 3, 2019

onur-dev commented Jan 3, 2019 • edited Loading

Lucasdsk commented Jun 12, 2019

develgooapps commented Jul 4, 2019 • edited Loading

xjq7 commented Sep 19, 2019

tusharkhatiwada commented Nov 21, 2019

Michaelvons commented Feb 13, 2020

Michaelvons commented Feb 13, 2020

desaiparv5 commented Sep 6, 2020

Michaelvons commented Sep 6, 2020

desaiparv5 commented Sep 9, 2020

albarkahdev commented Oct 26, 2020

SolidTears commented Nov 19, 2020 • edited Loading

zarttash-zafar commented Mar 5, 2021

rifansyah commented Apr 22, 2021

gerow-x commented Oct 23, 2018 •

edited

Loading

onur-dev commented Jan 3, 2019 •

edited

Loading

develgooapps commented Jul 4, 2019 •

edited

Loading

SolidTears commented Nov 19, 2020 •

edited

Loading