Creating a stack
Last updated
Was this helpful?
Last updated
Was this helpful?
We'll need to use 2 things to get you up and running with React Native Modalfy:
1., which is going to wrap the whole application and use React Context in order to display the modals on top of everything.
2. , that we'll use to create the stack needs to work as expected.
Find the app root's component and put its current content inside as so:
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:
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 now have a fully functional modal system, ready to be used and we'll see how in the following section.
If we run the previous examples, we'd get an error from the library. That's because is missing a stack of modals: let's fix that!
For this step, we'll use and pass its output to through the only prop the component accepts: stack
. accepts 2 arguments: a modal configuration object (mandatory) and a default options object (optional):
Through defaultOptions
in as we just did
Inside modalConfig
by providing a object instead of just the component directly
We only covered the simplest way of setting up a modal stack here. Feel free to check out the API reference to have more in-depth explanations of mechanics.