Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unimplemented component: <ModalHostView> #33652

Closed
nikhil-kumar-160 opened this issue Apr 15, 2022 · 16 comments
Closed

Unimplemented component: <ModalHostView> #33652

nikhil-kumar-160 opened this issue Apr 15, 2022 · 16 comments
Labels
Component: Modal Impact: Misconfiguration When the issue is due to a misconfig for the user Needs: Attention Issues where the author has responded to feedback. Platform: iOS iOS applications. Priority: Mid Tech: Fabric Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@nikhil-kumar-160
Copy link

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

@nikhil-kumar-160
Copy link
Author

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
Copy link

I facing the same issue dude: #33668

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

@cipolleschi cipolleschi added Platform: iOS iOS applications. Tech: Fabric Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) Impact: Misconfiguration When the issue is due to a misconfig for the user Priority: Mid labels May 20, 2022
@cipolleschi
Copy link
Contributor

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
Copy link

jgx-jay commented Jun 30, 2022

👁

@nikhil-kumar-160
Copy link
Author

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

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Jun 30, 2022
@nikhil-kumar-160
Copy link
Author

@nikhil-kumar-160
Copy link
Author

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

@nikhil-kumar-160
Copy link
Author

any updates?

@nikhil-kumar-160
Copy link
Author

I recently tried RN 0.69.1 and the issue still persists

@Milker90
Copy link

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
Copy link

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
Copy link

@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.

raykle pushed a commit to raykle/react-native that referenced this issue Aug 27, 2022
…4487)

Summary:
While working on a fix for facebook#29974 (I have a draft for that already (gabrieldonadel#16), just waiting for facebook#34406 to get merged) I noticed that the `KeyboardAvoidingView` tests on RNTester on iOS were not working with Fabric enabled because the `ModalHostView` component was still not implemented. Upon some more investigation, I found this code suggestion from Milker90 (facebook#33652 (comment)) that enables the Modal component on iOS when Fabric is enabled.

Closes facebook#33652

## Changelog

[iOS] [Added] - Add support for Modal on iOS when Fabric is enabled

Pull Request resolved: facebook#34487

Test Plan:
1. With Fabric enabled open the RNTester app and navigate to the Modal page
2. Test the `Modal` component through the sections changing props

https://user-images.githubusercontent.com/11707729/186289099-5223907d-b300-46bf-bfde-73259c29d544.mov

Reviewed By: christophpurrer

Differential Revision: D38981895

Pulled By: cipolleschi

fbshipit-source-id: cd493a8d2035900da2576323bc112e2565df4834
@Clonescody
Copy link

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
Copy link

same issue here!

@cipolleschi
Copy link
Contributor

@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
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Modal Impact: Misconfiguration When the issue is due to a misconfig for the user Needs: Attention Issues where the author has responded to feedback. Platform: iOS iOS applications. Priority: Mid Tech: Fabric Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants