ModalOptions
Note: Each key in this object has a default value and may be overridden either in the modalConfig
& defaultModalOptions
objects in createModalStack() or directly in the modal component file through modalOptions
.
import { Animated, ViewStyle } from 'react-native'
export interface ModalOptions {
animateInConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
animationIn?: (
animatedValue: Animated.Value,
toValue: number,
callback?: () => void,
) => Animated.CompositeAnimation | void
animateOutConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
animationOut?: (
animatedValue: Animated.Value,
toValue: number,
callback: () => void,
) => Animated.CompositeAnimation | void
backBehavior?: 'clear' | 'pop' | 'none'
backdropColor?: ViewStyle['backgroundColor']
backdropOpacity?: number
backdropAnimationDuration?: number
containerStyle?: ViewStyle
disableFlingGesture?: boolean
modal?: React.ComponentType<any>
position?: 'center' | 'top' | 'bottom'
stackContainerStyle?: ViewStyle | ((stackOpacity: Animated.Value) => ViewStyle)
transitionOptions?: ModalTransitionOptions
}
// ------------------ INTERNAL TYPES ------------------ //
export type ModalTransitionOptions = (
animatedValue: Animated.Value,
) => {
[key: string]:
| {
[key: string]: ModalTransitionValue
}[]
| ModalTransitionValue
}
export type ModalTransitionValue =
| Animated.AnimatedInterpolation
| string
| number
| undefined
API reference
animateInConfig
animateInConfig
animateInConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
Animation configuration used to animate a modal in, at the top of the stack. It uses Animated.timing()
so if you want to use another animation type, see animationIn
.
Note: only easing
and duration
are needed.
Default: { easing: Easing.inOut(Easing.exp), duration: 450 }
animationIn
animationIn
animationIn?: (
animatedValue: Animated.Value,
toValue: number,
callback?: () => void,
) => Animated.CompositeAnimation | void
Function that receives the animatedValue
used by the library to animate the modal opening, and a toValue
argument representing the modal position in the stack. Useful to implement your own animation type and/or composition functions.
Note: If you just want to use Animated.timing()
, check animateInConfig
.
Default: -
Example:
animationIn: (modalAnimatedValue, modalToValue, callback) => {
Animated.parallel([
Animated.timing(modalAnimatedValue, {
toValue: modalToValue,
duration: 300,
easing: Easing.inOut(Easing.exp),
useNativeDriver: true,
}),
Animated.timing(myOtherAnimatedValue, {
toValue: 1,
duration: 300,
easing: Easing.inOut(Easing.exp),
useNativeDriver: true,
}),
]).start(() => callback?.())
}
animateOutConfig
animateOutConfig
animateOutConfig?: Pick<Animated.TimingAnimationConfig, 'duration' | 'easing'>
Animation configuration used to animate a modal out (underneath other modals or when closing the last one).
Note: only easing
and duration
are needed.
Default: { easing: Easing.inOut(Easing.exp), duration: 450 }
animationOut
animationOut
animationOut?: (
animatedValue: Animated.Value,
toValue: number,
callback: () => void,
) => Animated.CompositeAnimation | void
Function that receives the animatedValue
used by the library to animate the modal closing, and a toValue
argument representing the modal position in the stack. Useful to implement your own animation type and/or composition functions.
Since Modalfy v3, the function receives acallback
argument, which must be called when the animation is finished.
Note: If you just want to use Animated.timing()
, check animateOutConfig
.
Default: -
Example:
animationOut: (modalAnimatedValue, modalToValue, callback) => {
Animated.parallel([
Animated.timing(modalAnimatedValue, {
toValue: modalToValue,
duration: 300,
easing: Easing.inOut(Easing.exp),
useNativeDriver: true,
}),
Animated.timing(myOtherAnimatedValue, {
toValue: 1,
duration: 300,
easing: Easing.inOut(Easing.exp),
useNativeDriver: true,
}),
]).start(() => callback?.())
}
backBehavior
backBehavior
backBehavior?: 'clear' | 'pop' | 'none'
How you want the modal stack to behave when users press the backdrop, but also when the physical back button is pressed on Android.
Notes:
'clear'
means that you want the whole stack to be cleared, whatever the amount of modals opened.'pop'
means that you only want the modal at the top of the stack to be removed.'none'
means that you don't want anything to happen, ie: users have to perform an action inside that modal before you programmatically remove it viacloseModal
.
Default: 'pop'
backdropColor
backdropColor
backdropColor?: ViewStyle['backgroundColor']
Color of the modal stack backdrop.
Default: 'black'
backdropOpacity
backdropOpacity
backdropOpacity?: number
Number between 0
and 1
that defines the backdrop opacity.
Default: 0.6
backdropAnimationDuration
backdropAnimationDuration
backdropAnimationDuration?: number
Number that defines how long the backdrop should take to animate in and out.
Default: 300
containerStyle
containerStyle
containerStyle?: ViewStyle
Styles applied to the <View>
directly wrapping your modal component.
Default: {}
disableFlingGesture
disableFlingGesture
disableFlingGesture?: boolean
Disable fling gesture detection to close the modal.
Note: the fling gesture handler is not enabled when position
is center
.
Default: false
modal
modal
modal?: React.ComponentType<any>
React component that will be rendered when you'll open the modal.
Note: only needed when you're using this inside createModalStack()
1st argument.
Default: -
pointerEventsBehavior
pointerEventsBehavior
pointerEventsBehavior?: 'auto' | 'none' | 'current-modal-only' | 'current-modal-none'
How you want any modal to respond to a touch/click.
Notes:
'auto'
means that you want the default behavior. The modal will catch touch events and propagate them automatically.'none'
means that you don't want the modal to catch any touch event. Touching/clicking on it will not trigger anything.'current-modal-only'
means that you only want the modal at the top of the stack to be touchable/clickable. Interacting with any modal below will not be possible and will be considered as interacting with the backdrop instead.'current-modal-none'
means that you don't want the current modal to be touchable/clickable. Nothing will happen when you'll interact with it but the modals below and the backdrop will still be reachable.
Default: 'auto'
position
position
position?: 'center' | 'top' | 'bottom'
Vertical positioning of the modal.
Default: 'center'
stackContainerStyle
stackContainerStyle
stackContainerStyle?: ViewStyle | ((stackOpacity: Animated.Value) => ViewStyle)
Styles applied to the <Animated.View>
directly wrapping the entire modal stack & backdrop.
The styles can be provided as a regular object or as a function (that will receive an Animated.Value
representing the opacity of the modal stack as sole argument).
stackContainerStyle(animatedOpacityValue)
wil then need to return a React Native style object containing values (that can use the provided animatedOpacityValue
to run animation interpolations).
Note: the object returned by stackContainerStyle()
must contain keys that work with useNativeDriver: true
.
Default: {}
transitionOptions
transitionOptions
transitionOptions?: ModalTransitionOptions
transitionOptions(animatedValue)
returns a React Native style object containing values that can use the provided animatedValue
to run animation interpolations on a modal.
Notes:
Whenever you interpolate
animatedValue
, theinputRange
corresponds to the modal position in your stack!0
will translate to "the modal is not rendered",1
to "this modal is on top of the stack/the only item in the stack",2
to "this modal is the 2nd item in the stack", etc.The last entry of
inputRange
will define how all the modals positioned at that index or more should animate. In the following example, any modal positioned 4th or more in the stack will have an opacity of0
:
opacity: animatedValue.interpolate({
inputRange: [0, 1, 2, 3, 4],
outputRange: [0, 1, 0.9, 0.6, 0],
})
The object returned by
transitionOptions()
must contain keys that work withuseNativeDriver: true
. If some don't, consider usingcontainerStyle
.
Default: -
Last updated
Was this helpful?