ModalProvider

<ModalProvider> is the component you're going to use to wrap your whole application, so it'll be able to display your modals on top of everything else, using React Context API.

Note: ModalProvider wraps its children inside a View component so feel free to put as many siblings as you want inside of it (no need to wrap them inside a View/Fragment before passing the content to ModalProvider).

React JSX

./App.js

import React from 'react'
import { ModalProvider, createModalStack } from 'react-native-modalfy'

import Navigation from './navigation'
import { ErrorModal } from './components/Modals'

const modalConfig = { ErrorModal }
const defaultOptions = { backdropOpacity: 0.6 }

const stack = createModalStack(modalConfig, defaultOptions)

const App = () => (
  <ModalProvider stack={stack}>
    <Navigation />
  </ModalProvider>
)


export default App

https://github.com/colorfy-software/react-native-modalfy/blob/master/lib/ModalProvider.tsx