HomeiOS Developmentandroid - disable fling gesture for a selected modal in react-native-modalfy...

android – 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, equivalent to ExerciseInfoModal, SelectExerciseModal, and RestTimeSelector. Every modal has its personal conduct, and I’m working into a difficulty with gesture dealing with.
Drawback
I’d wish 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).
Purpose
I need to disable the dismiss gesture just for ExerciseInfoModal whereas retaining the opposite modals unaffected and totally purposeful.

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: "middle", // Fling gesture needs to be disabled by default right here
  transitionOptions: (animatedValue) => ({
    opacity: animatedValue.interpolate({
      inputRange: [0, 1, 2],
      outputRange: [0, 1, 0.9],
    }),
    rework: [
      {
        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),
    period: 450,
  },
  animateOutConfig: {
    easing: Easing.bezier(0.42, -0.03, 0.27, 0.95),
    period: 450,
  },
};

const stack: ModalStack = createModalStack(
  modalConfig,
  defaultOptions
);


  return (
    
      
      
      
        
      
      
    
  );

Observations:

With place: “middle” in defaultOptions, the fling gesture ought to already be disabled, however ExerciseInfoModal can nonetheless be swiped away (probably 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 positive with disableFlingGesture: true, probably 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 completely satisfied to tweak the setup or strive different 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 prematurely to your assist!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments