android – Easy methods to disable fling gesture for a selected modal in react-native-modalfy with out affecting different modals?

0
4
android – Easy methods to disable fling gesture for a selected modal in react-native-modalfy with out affecting different modals?


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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here