Trigger event when dismissable is false and dismiss is attempted

[codydorsettlynn]

I have a use case where I would like a user to be able to dismiss the sheet but may have entered a lot of information that will be lost in doing so.

I would like to have the behavior of dismissable=false but have an event fire when they try to dismiss (by drag or tapping the dimmed area) which I can use to fire an Alert to confirm the action.

See the below code as an example of what I would like to do.

import React, { useRef, useState } from 'react';
import { Alert } from 'react-native';
import TrueSheet from 'react-native-true-sheet';

function Example({
  onUpdate = (state) => {},
  onCancel = () => {},
}:{
  onUpdate?: (state: any) => void,
  onCancel?: () => void,
}) {
  const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
  const sheet = useRef<TrueSheet>(null);

  return (
    <TrueSheet
      ref={sheet}
      dismissible={unsavedChanges}
      onDismiss={onCancel}
      onDismissAttempt={() => {
        if(unsavedChanges) {
          Alert.alert('Are you sure?', 'You have unsaved changes', [
            {
              text: 'Cancel', 
              style: 'cancel',
              onPress: () => {
                // do nothing
              },
            },
            {
              text: 'OK', 
              style: 'destructive',
              onPress: () => {
                // allow dismiss since user confirmed
                sheet.current.dismiss();
              },
            }
          ])
        } else {
          // allow dismiss since there are no unsaved changes
          sheet.current.dismiss();
        }
      }}
    >
      {/* Form with inputs and save button */}
    </TrueSheet>
  );
}

[codydorsettlynn]

Event would trigger once per tap on the dimmed area, and once per drag below min index if using the grabber (since dismissable=false prevents dragging much below the min index). Cant trigger again until the grab position is at or above the min index.