Message shows underneath modal

I would like to start off by saying that this library is amazing.

I’m having one particular issue that the message shows underneath a modal if a modal is currently open

My current root setup looks like:

  <Provider store={store}>
    <ActionSheetProvider>
      <App />
    </ActionSheetProvider>
  </Provider>

Where App is :

        <View style={{flex: 1}}>
          <AppNavigation
            ref={this.onNavigatorRef.bind(this)}
          />
          <FlashMessage position="top" />
        </View>

Any help would be appreciated, thanks!

Issue Analytics

State:
Created 4 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

11reactions

lucasferreiracommented, Nov 7, 2019

Hi @ucallQA and @lisa-nguyen-goldenowl

As we could see in https://github.com/react-native-community/react-native-modal README:

“Since react-native-modal is an extension of the original react native modal, it works in a similar fashion react-native original modal.”

The original react native modal it’s a “100% native solution” it works in another UI thread inside the app like a portal, só it runs always above everything in your app.

The only solution we had in this case it’s described here: https://github.com/lucasferreira/react-native-flash-message/issues/1#issuecomment-375636151

Basically you will need to put a second instance of <FlashMessage /> component inside your modals and call the show message by the ref, ex: this.refs.mySecondFlashMessage.showMessage({ ... })

5reactions

ucallQAcommented, Oct 17, 2019

I actually double checked if we were using a built in modal and we are using this library

https://github.com/react-native-community/react-native-modal

I think there might be a priority issue with this library, is there some way I can prioritize the react-native-flash-message over this one? I use the modal nested deep within one of my react components while the react-native-flash-message is initialized and called within the root/first layer of the project so I would imagine it would take priority.

Unless I’m misunderstanding the issue and it’s related to react-navigation (we’re on a much older version of it, this might be why it’s acting weird)