Changing ModalOption from modal component

[eduardfarkas]

Hi there, First of all, this is amazing library!

Back to my question, in docs, it says that I can change ModalOptions from ModalComponent, but I cannot figure out how. I came across multiple problems, but in a nutshell, i am just lost...

Closest thing I got to, is wrapping my props type into "ModalComponentWithOptions<>", it exposes prop "modalOptions", but i am not sure how to use it. I would like to be able to change "backBehaviour" dynamically. Second thing with this generic type is, that it removes my "modal" prop from the type? I dont know why, when I look in definition, it looks correct to me. I am using it like this

Can you please push me into right direction? Thank you in advance

[CharlesMangwa]

hey @eduardfarkas!

i believe the info you are looking for is in ModalComponentWithOptions documentation.

regarding your 2 questions, you could make the following changes:

- const ConfirmModal = ({ modal: { params, closeModal } }: ModalComponentWithOptions<ModalProps<"ConfirmModal">>) =>
+ const ConfirmModal: ModalComponentWithOptions<ModalProps<"ConfirmModal"> = ({ modal: { params, closeModal }}) =>

// ...

+ ConfirmModal.modalOptions = {
+   backBehaviour = "none"
+ }

you'll notice int the docs that the library does not support modifying modalOptions from within the modal component. let me know if the currently supported approach does not cover your use case!

[eduardfarkas]

Hi @CharlesMangwa, thank you for information. Now, when you pointed it out, i see that docs states "in file"

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.

I got the types working properly with your proposed change.

However it does not cover my use case. To be more clear, I would like to set "dismissible" param on opening the modal. So I could define it like this:

      const { openModal } = useModal<ModalStackParamsList>();

      const handlePress = useCallback(async () => {
          openModal("ConfirmModal", {
              onConfirm: () => children.props.onPress(),
              onCancel: () => {},
              dismissible: false, // default would be true
          });
      }, [children.props, headerText, captionText]);

I guess i could make a workaround with 2 modals, where one would be dismissible and the other one not. But I would like to have it like this, if its possible.

[CharlesMangwa]

i think i get what you mean @eduardfarkas.. unfortunately, such a method (ie: modal.updateOptions({ ... })) does not exist (just yet..). i'll try to implement it in an upcoming release.