Creating a stack
We'll need to use 2 things to get you up and running with React Native Modalfy:
1.
<ModalProvider>
, which is going to wrap the whole application and use React Context in order to display the modals on top of everything. 2.
createModalStack()
, that we'll use to create the stack <ModalProvider>
needs to work as expected.Find the app root's component and put its current content inside
<ModalProvider>
as so:React JSX
./App.js
import React from 'react'
import { Text, View } from 'react-native'
import { ModalProvider } from 'react-native-modalfy'
const App = () => (
<ModalProvider>
<Text>Welcome to React Native!</Text>
<Text>To get started, edit App.js</Text>
</ModalProvider>
)
export default App
You can be working on a more complex application with a lot of providers already. No worries to have here: React Native Modalfy can work wherever we render it in the app root component:
React JSX
./App.js
import React from 'react'
import { Provider } from 'react-redux'
import { ApolloProvider } from 'react-apollo'
import { ModalProvider } from 'react-native-modalfy'
import Navigation from './navigation'
import reduxStore from './redux'
import client from './graphql'
const App = () => (
<ApolloProvider client={client}>
<Provider store={reduxStore}>
<ModalProvider>
<Navigation />
</ModalProvider>
</Provider>
</ApolloProvider>
)
export default App
You'll notice that we put
<ModalProvider>
inside of <ApolloProvider>
and Redux's <Provider>
just in case modal components might need data from them.If we run the previous examples, we'd get an error from the library. That's because
<ModalProvider>
is missing a stack of modals: let's fix that!For this step, we'll use
createModalStack()
and pass its output to <ModalProvider>
through the only prop the component accepts: stack
. createModalStack()
accepts 2 arguments: a modal configuration object (mandatory) and a default options object (optional):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
There are 3 ways to provide options to a modal:
- 1.Trough
defaultOptions
increateModalStack()
as we just did - 2.
- 3.Inside the modal component file itself, via
static modalOptions
(Class) orMyModalComponent.modalOptions
(Hooks)
In this example,
<ErrorModal>
is a regular React component we're using as our 1st modal. React Native Modalfy will register it under the key 'ErrorModal'
. Given that we're working with normal JavaScript objects here, you can change that key by simply changing the
modalConfig
key, ie: const modalConfig = { MyCustomErrorModalName: ErrorModal }
.We only covered the simplest way of setting up a modal stack here. Feel free to check out the createModalStack() API reference to have more in-depth explanations of
createModalStack()
mechanics.We now have a fully functional modal system, ready to be used and we'll see how in the following section.
Last modified 2yr ago