Variable magicModalConst

magicModal: {
    disableFullWindowOverlay: DisableFullWindowOverlayFunction;
    enableFullWindowOverlay: EnableFullWindowOverlayFunction;
    hide: GlobalHideFunction;
    hideAll: GlobalHideAllFunction;
    show: GlobalShowFunction;
} = ...

Type declaration

  • disableFullWindowOverlay: DisableFullWindowOverlayFunction

    Description

    Disables the full window overlay globally. This is useful for modals that do not need to be displayed on top of native iOS modal screens. The function is no-op on non-iOS platforms.

    Example

    magicModal.disableFullWindowOverlay();
    await magicModal.show(() => <ExampleModal />).promise;
    magicModal.enableFullWindowOverlay();

    Platform

    ios

  • enableFullWindowOverlay: EnableFullWindowOverlayFunction

    Description

    Enables the full window overlay globally. This is useful for modals that need to be displayed on top of native iOS modal screens. The function is no-op on non-iOS platforms.

    Example

    magicModal.disableFullWindowOverlay();
    await magicModal.show(() => <ExampleModal />).promise;
    magicModal.enableFullWindowOverlay();

    Platform

    ios

  • hide: GlobalHideFunction

    Description

    Hides the given modal. Prefer using hide from useMagicModal, as it already infers the modalID. You should use the magicModal.hide function directly only when calling from outside the modal.

    Param: props

    Those props will be passed to the show resolve function.

  • hideAll: GlobalHideAllFunction

    Description

    Hides all modals in the stack. This function should be used sparingly, as it's generally preferable to hide modals individually from within the modal itself. However, this function can be useful in edge cases. It's also useful for test suites, such as calling hideAll in Jest's beforeEach function as a cleanup step.

  • show: GlobalShowFunction

    Description

    Pushes a modal to the Stack, it will be displayed on top of the others.

    Param: newComponent

    Recieves a function that returns a modal component.

    Param: newConfig

    Recieves NewConfigProps to override the default configs.

    Returns

    Returns a Promise that resolves with the hide props when the Modal is closed. If it were closed automatically, without the manual use of hide, the return would be one of HideReturn

Example

// ...
import { magicModal } from 'react-native-magic-toast';

// ...
const ExampleModal = () => (
 const { hide } = useMagicModal<{ message: string }>();
 <Pressable onPress={() => hide({ message: "hey" })}>
   <Text>Test!</Text>
 </Pressable>
)

const result = magicModal.show(ExampleModal);
console.log(await result.promise); // Returns { reason: MagicModalHideReason.INTENTIONAL_HIDE, message: "hey" } when the modal is closed by the Pressable.

Settings

Member Visibility