Unimplemented component: <ModalHostView>

[nikhil-kumar-160]

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

[nikhil-kumar-160]

I am getting this message on iOS but not on android.
@cortinico , can you please telll what might be the issue?
I also upgraded to React Native 0.68.1

[brunoducattii]

I facing the same issue dude: #33668

Hope someone can help. After the 0.68.1 launching, the support/engagement disappeared.

[cipolleschi]

Hi @nikhil-kumar-160, thanks for raising the issue.

The component you are trying to use has not been migrated to Fabric. Therefore, it's not compatible with the New Architecture.

Could you prepare a small repo with a reproducer and share it with us?

[jgx-jay]

👁

[nikhil-kumar-160]

Okay @cipolleschi, I'll try to update a repo link for the same.

[nikhil-kumar-160]

Repo link:- https://github.com/nikhil-kumar-160/TestApp.git

[nikhil-kumar-160]

@cipolleschi, One More Thing, It works perfectly on android. The issue is only on iOS

[nikhil-kumar-160]

any updates?

[nikhil-kumar-160]

I recently tried RN 0.69.1 and the issue still persists

[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

[JesseLawler]

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

Thanks so much Milker. This temporary fix works great, and I'm wondering how you figured it out? I'm updating an app that has several "Unimplemented Components" and I'm wondering if I may be able to use this approach for any other quick-fixes.

[Milker90]

@EvilGeniusTechnologies There are other "Unimplemented Components" you mentioned, which I encountered as well, it seems that many libraries don't support Fabric yet, so it will take time.

The above solution is a special case, because Modal is a built-in component of ReactNative, and ReactNative implements Fabric for it, but I don’t know why it is not used, and there may be some problems, so the above solution is only temporary.

At present, in most cases, the problem is that there is no component that does not implement Fabric. If you want to solve it in advance, you need to refer to the official documentation to implement Fabric for the component.

[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

[imWildCat]

same issue here!

[cipolleschi]

@imWildCat @Clonescody, thanks for reporting this.
The PR has been included in 0.71, which we are about to release in the next few weeks. After 0.71 release, the error should be gone.

[masonjenkins]

@imWildCat @Clonescody, thanks for reporting this. The PR has been included in 0.71, which we are about to release in the next few weeks. After 0.71 release, the error should be gone.

Is this PR in the RC3 or RC4 versions? I'm still seeing this error on both.