I’m engaged on a React Native (Expo) app and utilizing react-native-modalfy to handle a number of modals, resembling ExerciseInfoModal, SelectExerciseModal, and RestTimeSelector. Every modal has its personal conduct, and I’m operating into a problem with gesture dealing with.
Drawback
I’d prefer to disable the fling gesture (or any dismiss gesture) particularly for ExerciseInfoModal so customers can’t swipe it down on iOS/Adnorid or dismiss it with the again button on Android. I’ve tried setting disableFlingGesture: true within the modal’s choices inside modalConfig, but it surely doesn’t appear to work—the modal can nonetheless be dismissed with a swipe. After I transfer disableFlingGesture: true to the defaultOptions, it does disable the gesture for all modals, however this messes up the UI for different modals like SelectExerciseModal, which makes use of a FlashList with scrollable content material (e.g., alignment points or unresponsive scrolling).
Objective
I need to disable the dismiss gesture just for ExerciseInfoModal whereas maintaining the opposite modals unaffected and absolutely practical.
My Present Setup
Right here’s how I’ve configured react-native-modalfy:
//Modal Configuration (modalConfig)
const modalConfig = {
TimerModal,
FullCalendarModal,
RestTimeSelector: {
modal: RestTimeSelector,
choices: {
disableFlingGesture: true,
},
},
SelectExerciseModal,
AddExerciseDialog,
CustomConfirmationDialog,
ExerciseInfoModal: {
modal: ExerciseInfoModal,
choices: {
presentationStyle: "overFullScreen",
gestureEnabled: false, // Ought to disable swipe-to-dismiss
disableFlingGesture: true, // Ought to disable fling gesture
onBackButtonPress: () => {}, // Ought to block Android again button
},
},
SetTypeModal,
PickerModal,
};
//Default Choices (defaultOptions):
`const defaultOptions: ModalOptions = {
backdropOpacity: 0.6,
place: "heart", // Fling gesture needs to be disabled by default right here
transitionOptions: (animatedValue) => ({
opacity: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 1, 0.9],
}),
remodel: [
{
perspective: 2000,
},
{
translateY: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 0, -300],
}),
},
{
rotateX: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: ["0deg", "0deg", "90deg"],
extrapolate: "clamp",
}),
},
{
scale: animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [0.1, 1, 0.9],
}),
},
],
}),
animateInConfig: {
easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
length: 450,
},
animateOutConfig: {
easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
length: 450,
},
};
const stack: ModalStack = createModalStack(
modalConfig,
defaultOptions
);
return (
);
Observations:
With place: “heart” in defaultOptions, the fling gesture ought to already be disabled, however ExerciseInfoModal can nonetheless be swiped away (presumably the native swipe-to-dismiss).
Setting disableFlingGesture: true in defaultOptions works however breaks the UI for modals with scrollable content material (e.g., SelectExerciseModal).
RestTimeSelector behaves tremendous with disableFlingGesture: true, seemingly as a result of it has no scrollable content material.
What I’ve Tried
Added gestureEnabled: false to ExerciseInfoModal choices to cease swipe-to-dismiss, but it surely doesn’t take impact.
Used onBackButtonPress: () => {} to dam Android again button dismissal, however gestures nonetheless dismiss the modal.
Set disableFlingGesture: true in defaultOptions, which works however causes UI issues for different modals.
Questions
Why don’t gestureEnabled: false and disableFlingGesture: true in modalConfig work for ExerciseInfoModal?
How can I disable the dismiss gesture only for ExerciseInfoModal with out impacting different modals?
Might this be a limitation or bug in react-native-modalfy, or am I lacking a configuration element?
I’d actually respect any insights, workarounds, or options! I’m comfortable to tweak the setup or strive various approaches to make this work easily.
Extra Particulars
Library Model: react-native-modalfy v3.6.0(newest)
Platform: iOS and Android (Expo)
Associated Elements: Utilizing FlashList from @shopify/flash-list in SelectExerciseModal
Thanks upfront on your assist!
