React Native Modalfy
v3.x
Search…
⌃K

createModalStack

createModalStack() is the function that's going to turn your configuration into a usable modal stack.
TypeScript
const createModalStack = (
config: ModalStackConfig,
customDefaultOptions?: ModalOptions
) => ModalStack
Argument: ModalStackConfig config - Modal stack configuration.
Argument: ModalOptions customDefaultOptions - Configuration options to apply to all modals by default (optional).
Returns: Modal stack configuration object to provide to <ModalProvider/>'s stack prop.
Example:
./App.js
import { Dimensions } from 'react-native'
import { PokedexEntryModal } from './modals/PokedexEntryModal'
​
const { height } = Dimensions.get('screen')
​
createModalStack({ PokedexEntryModal }, {
animateInConfig: {
easing: Easing.inOut(Easing.exp),
duration: 900,
},
animateOutConfig: {
easing: Easing.inOut(Easing.exp),
duration: 900,
},
backdropOpacity: 0.9,
backropColor: 'deeppink',
backBehavior: 'clear',
position: 'bottom',
containerStyle: {
backgroundColor: 'rebeccapurple',
},
transitionOptions: animatedValue => ({
transform: [
{
translateY: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [height, 0, height],
}),
},
{
scale: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 1, 0.9],
}),
},
],
}),
},
)
​