Use the built-in Modal component from React Native

[LinusU]

Fixes #150

ping @jeppeArchidraw, @shanekoss feel free to try this out and see if it fixes your problem:

npm install LinusU/react-native-popup-dialog#rn-modal

or

yarn add LinusU/react-native-popup-dialog#rn-modal

[LinusU]

friendly ping @jacklam718 ☺️

[LinusU]

friendly ping @jacklam718 ☺️

Our app isn't suffering from #150 without this, would be great to get this merged and a new release cut 👍

[jacklam718]

@LinusU Very sorry for late reply and Thanks for your pull request. I use react-native-root-siblings instead of built-in Modal component because I want to support multi dialogs but the built-in Modal component doesn't support multiple modals FYI: https://github.com/facebook/react-native/issues/3445.

[LinusU]

No worries!

From reading around the links from the issue, I think that this has actually been solved in a later version of react-native. To be absolutely sure I tested it, and it seems to work great:

import React, { useState } from 'react'
import { Button, SafeAreaView, Text } from 'react-native'

import Dialog from 'react-native-popup-dialog'

const SecondPopup = ({ onTouchOutside, visible }) => {
  return (
    <Dialog onTouchOutside={onTouchOutside} visible={visible}>
      <Text>Second popup!</Text>
    </Dialog>
  )
}

const FirstPopup = ({ onTouchOutside, visible }) => {
  const [showPopup, setShowPopup] = useState(false)

  return (
    <Dialog onTouchOutside={onTouchOutside} visible={visible}>
      <Text>Hello, World!</Text>
      <Text>This is the first popup</Text>
      <Button title='Second' onPress={() => setShowPopup(true)} />

      <SecondPopup onTouchOutside={() => setShowPopup(false)} visible={showPopup} />
    </Dialog>
  )
}

const App = () => {
  const [showPopup, setShowPopup] = useState(false)

  return (
    <SafeAreaView>
      <Button title='Open first' onPress={() => setShowPopup(true)} />

      <FirstPopup onTouchOutside={() => setShowPopup(false)} visible={showPopup} />
    </SafeAreaView>
  )
}

export default App

Feel free to try it out yourself! ☺️

edit: This was an empty React Native project, with this branch installed (npm add LinusU/react-native-popup-dialog#rn-modal) and the code above pasted into App.js