Modal not implemented

[tom-un]

Modal is not implemented for mac.

Some thought would have to go into how existing props would behave, such as https://reactnative.dev/docs/modal#presentationstyle

fullScreen and overFullScreen for instance: should modal be overlaid on top of the containing RCTRootView? Probably. Then what should formView and pageSheet map too? Perhaps to a macOS Sheet dialog? there should probably be additional mac or desktop specific presentation styles for a Modal that has its own top level NSWindow.

[elicwhite]

I think presentationStyle is an iOS only prop, so it wasn't designed to be general purpose for Modal, rather they are the presentation styles presented by the platform. I think you could either decide to map to them where they exist on Mac, define a mac_ specific prop, or a different component if the concept doesn't map to Mac / Desktop at all.

[Zorgatone]

requireNativeComponent: "RCTModalHostView" was not found in the UIManager.

(without any option just )

[chase-robbins]

Experienced RCTModalHostView" was not found in the UIManager today as well when moving a RN IOS project into a MacOS project.

[ShivamJoker]

hello ???????????? Any updates ?????

[HeyImChris]

@ShivamJoker most of our team is away for the holidays, but we can take a closer look at this soon. It sounds like there simply isn't support for this control on macOS at the moment.

I can't give a timeline on when we could get to prioritizing support, but will see if there's anything reasonable we can do in the short term to unblock after the holidays.

[ShivamJoker]

@HeyImChris right now one simple solution I used was to absolute position the container and use it like that.

But to animate it we can wrap it in animated view so it might work.

[rafi16jan]

import React from 'react';
import { View, Animated } from 'react-native';

export default function Modal(props) {
  const [visible, setVisible] = React.useState(props.visible);
  const fadeAnim = React.useRef(new Animated.Value(visible ? 1 : 0)).current;
  const fadeIn = () => {
    setVisible(true);
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true
    }).start();
  };
  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true
    }).start(() => setVisible(false));
  };
  if (!props.visible) setTimeout(fadeOut, 0);
  if (props.visible) setTimeout(fadeIn, 0);
  return (
    <Animated.View useNativeDriver style={{opacity: fadeAnim, position: 'absolute', top: 0, left: 0, height: '100%', width: '100%', zIndex: visible ? 1000000 : undefined}}>
      {props.children}
    </Animated.View>
  );
}

[SBS-olessia]

is there any update on the Modal being supported on MACOS? Absolute positioning has not worked for me

[rafi16jan]

is there any update on the Modal being supported on MACOS? Absolute positioning has not worked for me

This past 2 months I've been successfully ported a RNW electron project to RN Mac and Windows. If I can turn back time, I will choose RN iOS Mac Catalyst route as bigger supported libraries and compatibility in general. RN Mac is dogshit

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[ShivamJoker]

Not stale.

[SBS-randerson]

Any update on this?

[ywisax]

    "react-native-macos": "0.73.26",

still not working

[Saadnajmi]

Sorry for not giving an update earlier. Modal is one of the components not implemented on React Native macOS, yes. We may have an implementation for Fabric / the new architecture, but I don't think we'll have one for the old architecture. I'l try to give updates here.

[danishshaik]

Also interested in this, any timeline?

[shirakaba]

We need Modal in order to block pointer events (both click and hover events) passing through to components under the view. We also need it to prevent accessibility tools (e.g. voice control) from focusing on components that should be unfocusable.

It seems that using a full-size view with z-index and/or absolute positioning can't cover those requirements.

I think any Modal should just be another view in the same window, rather than Modal opening a new NSWindow. I am not sure whether it should involve presenting a view controller or not. I think AppKit is really slow at presenting view controllers, but it's probably the sensible way to go about it as it'd handle the responder chain for free.

I've not really thought as far as nested/stacked modals. Presumably this is something React Native iOS handles. I think it supports multiple root-level views for exactly this kind of scenario.