2

I'm using React Native Paper library and I have a Modal and Dialog, I want to dialog to appear in front of the modal... is there a way to do this?

If there's no way I would have to code the structure of a dialog on my own using a Modal and I'd rather not do that...

Thanks

aabcabca12
  • 353
  • 1
  • 4
  • 17

1 Answers1

2

I had same problem and I solved it by using both react-native-paper and react-native's Modal.

  • react-native: 0.63.2
  • react-native-paper: 2.16.0

import {Modal as RNModal} from 'react-native';
import {Modal, Portal} from 'react-native-paper';

return (
<Portal>
   <Modal>
      <View>
        ...content for the view
      </View>
      <RNModal visible={props.visible} transparent={true}>
        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
        ...content for dialog
        </Dialog>
      <RNModal>
   </Modal>
</Portal>
);

RNModal causes the inner dialog to always be on top.

soyster
  • 21
  • 3