unstable_reactLegacyComponentNames IOS Issue

[affansk]

Description

i get this Failure Error in IOS when i make use of this unstable_reactLegacyComponentNames: ['BVLinearGradient'] to support in new architecture

Thread Performance Checker: Thread running at QOS_CLASS_USER_INTERACTIVE waiting on a lower QoS thread running at QOS_CLASS_DEFAULT. Investigate ways to avoid priority inversions

Assertion failed: (module), function constructCoordinator, file LegacyViewManagerInteropComponentDescriptor.mm, line 64.

React Native Version

0.72.0

Output of npx react-native info

Assertion failed: (module), function constructCoordinator, file LegacyViewManagerInteropComponentDescriptor.mm, line 64

Steps to reproduce

1. Add unstable_reactLegacyComponentNames in react native config file for the component which is not compatible with new architecture
2. run the xcode
3. the build will be successfull
4. the xcode will crash with above error

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

just add this in react-native config file
project: {
ios: {
unstable_reactLegacyComponentNames: ['BVLinearGradient'],
},
android: {}, // grouped into "project"
},

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[cortinico]

We would need a full repro to look into this. Also: what is BVLinearGradient? Which library is exposing it? Is it a component you created?

[cpintos-sc]

@cortinico the library could be this one. I'm, getting the exact same error with the package's latest release 2.7.3.

[cortinico]

@cpintos-sc thanks for the update. Does the issue happen on both Android & iOS?

[affansk]

@cortinico sorry for late reply, i just tested on Android with version 0.72.0, its working fine.
On IOS I can still see that issue.

project: {
ios: {
unstable_reactLegacyComponentNames: ['BVLinearGradient','RNSVGImage'],
},
android: {
unstable_reactLegacyComponentNames: ['BVLinearGradient', 'RNSVGImage'],
}, // grouped into "project"
},

Update : @cortinico i guess the problem is with this package https://github.com/react-native-linear-gradient/react-native-linear-gradient

i just use unstable_reactLegacyComponentNames only with RNSVGImage for IOS. it works fine.

[kelset]

is the actionable that something needs to be changed in linear-gradient, or in the interop layer?

[affansk]

not 100% Percent sure! i guess need to change in linear-gradient package.
there is already a PR react-native-linear-gradient/react-native-linear-gradient#606 for New architecture

[cpintos-sc]

Hi, just to let you know. There is already a forked version of that project that supports the fabric renderer, rnx-gradient.
And JUST IN CASE! you are happening to use react-native-skeleton-placeholder here is a patch for that package that replaces the old react-native-linear-gradient for the one that supports fabric. This solved my issues! Hope it helps.
cc: @affansk

[cipolleschi]

Update : @cortinico i guess the problem is with this package react-native-linear-gradient/react-native-linear-gradient

i just use unstable_reactLegacyComponentNames only with RNSVGImage for IOS. it works fine.

Given this, I'd probably close this issue and ask @affansk to eventually open an issue in the react-native-linear-gradient repo as this looks more like a lib problem rather than an interop layer problem.
Opinions @affansk, @cortinico, @kelset?

[cortinico]

Yup let's close this as multiple alternatives have been raised.

[cipolleschi]

Actually, this highlighted a shortcoming of the Interop Layer for iOS, so I'm looking into this.
A PR will come soon

[renyufei8023]

module.exports = {
    project: {
      ios: {
        unstable_reactLegacyComponentNames: [
          'FastImageView',
        ],
      },
      android: {},
    },
    // assets: ['./src/assets/fonts'],
  };

Crash

[cipolleschi]

@renyufei8023 can you share which library are you using? I guess it is react-native-fastimage but could be wrong.

What's happening here is that FastImage is probably not following one of the supported convention to define the ViewManager and, therefore, the InteropLayer fails to create it.

I can look into how the view manager is called and see if we can extend the interop layer somehow.

[renyufei8023]

这里发生的情况是 FastImage 可能没有遵循定义 ViewManager 的受支持约定之一，因此 InteropLayer 无法创建它。

我可以研究如何调用视图管理器，看看我们是否可以以某种方式扩展互操作层。

I am currently using react native fast image，repo：https://github.com/DylanVann/react-native-fast-image#readme