Unimplemented component: <ModalHostView>

See original GitHub issue

Description

After enabling the new Architecture for my React Native App, the Modal shows following message inside the component simulator_screenshot_46C6DEF6-6B70-4127-8FE4-4A7BF18979E1 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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:16 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
Milker90commented, Aug 15, 2022

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

4reactions
Clonescodycommented, Nov 3, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

REACT-NATIVE Unimplemented component - Stack Overflow
Please follow this dependencies before using react-native-tab-view Run the following commands npm install @react-navigation/native.
Read more >
iOS上报错: Unimplemented component: <ModalHostView>
官方并没有开启iOS中modal的Fabric功能,所以只能自己先修改源码找到头文件RCTFabricComponentsPlugins.h,添加下面代码Class.
Read more >
Unimplemented component: <ModalHostView> - bytemeta
We can see the message by simply importing Modal from react-native. Snack, code example, screenshot, or link to a repository. No response.
Read more >
A React-Native datetime-picker for Android ... - BestofReactjs
customPickerIOS, component, Overrides the default native picker component (iOS) ... Unimplemented component: <ModalHostView>.
Read more >
react-native-modal-datetime-picker - githubmemory
Unimplemented component : <ModalHostView>. lvlrSajjad. lvlrSajjad CLOSED · Updated 2 months ago · datetime mode with inline display bug on iOS. guts716.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found