Unimplemented component: <ModalHostView>

Description

After enabling the new Architecture for my React Native App, the Modal shows following message inside the component n

Version

0.68.0

Output of npx react-native info

System: OS: macOS 12.3.1 CPU: (8) arm64 Apple M1 Memory: 427.50 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.8.0 - /opt/homebrew/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.5.5 - /opt/homebrew/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 28, 29, 30, 31, 32 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 32.0.0, 32.1.0 System Images: android-31 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.0 => 0.68.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

We can see the message by simply importing Modal from react-native.

Snack, code example, screenshot, or link to a repository

No response

[Milker90]

hi @nikhil-kumar-160, I found a temporary solution, hope it helps you.

1. find “RCTFabricComponentsPlugins.h” in react native, and add this code Class<RCTComponentViewProtocol> RCTModalHostViewCls(void) __attribute__((used));

2. find “RCTFabricComponentsPlugins.mm”, and add this code
   {"ModalHostView", RCTModalHostViewCls} to the end of sFabricComponentsClassMap

Class<RCTComponentViewProtocol> RCTFabricComponentsProvider(const char *name) {
  static std::unordered_map<std::string, Class (*)(void)> sFabricComponentsClassMap = {
    {"SafeAreaView", RCTSafeAreaViewCls},
    {"ScrollView", RCTScrollViewCls},
    {"PullToRefreshView", RCTPullToRefreshViewCls},
    {"ActivityIndicatorView", RCTActivityIndicatorViewCls},
    {"Slider", RCTSliderCls},
    {"Switch", RCTSwitchCls},
    {"UnimplementedNativeView", RCTUnimplementedNativeViewCls},
    {"Paragraph", RCTParagraphCls},
    {"TextInput", RCTTextInputCls},
    {"InputAccessoryView", RCTInputAccessoryCls},
    {"View", RCTViewCls},
    {"Image", RCTImageCls},
    {"ModalHostView", RCTModalHostViewCls},
  };

  auto p = sFabricComponentsClassMap.find(name);
  if (p != sFabricComponentsClassMap.end()) {
    auto classFunc = p->second;
    return classFunc();
  }
  return RCTThirdPartyFabricComponentsProvider(name);
}

this will enable ModalHostView for Fabric

[Clonescody]

Hey guys, wondering if this has been released already ? The issue still happens on RN 0.70.4 on iOS with the new architecture on a bare bones project.

Pushed a reproductible demo here https://github.com/Clonescody/rn-modal-error-new-arch