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
defaultOptionsincreateModalStack()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