Interop layer doesnt work for react-native-charts-wrapper

[MaxToyberman]

Description

I am using react-native-charts-wrapper, and after enabling the new architecture (Fabric) on iOS, the charts no longer render. On Android, I have started migrating to Fabric (work in progress), and it compiles and runs successfully.

However, on iOS, the library and native code are written in Swift. As I understand, Fabric currently has limited compatibility with Swift, which may be causing the issue.

Steps to reproduce

1. yarn install
2. cd ios && bundle install
3. bundle exec pod install - Graph is visible
4. bundle install && RCT_NEW_ARCH_ENABLED=1 arch -x86_64 bundle exec pod install - Graph is invisible

React Native Version

0.75.4

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.7
  CPU: (10) arm64 Apple M1 Pro
  Memory: 215.09 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.npm-global/bin/yarn
  npm:
    version: 10.2.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.09.16.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/maximtoyberman/.rvm/gems/ruby-3.2.2/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/maximtoyberman/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Bridgeless mode is enabled
Unbalanced calls start/end for tag 20
Unbalanced calls start/end for tag 19
Running "ReproducerApp" with {"rootTag":1,"initialProps":{"concurrentRoot":true},"fabric":true}

Reproducer

https://github.com/MaxToyberman/charts-wrapper-repro

Screenshots and Videos

No response

[cortinico]

@MaxToyberman thanks for reporting this bug. A couple of questions:

On Android, I have started migrating to Fabric (work in progress), and it compiles and runs successfully.

1. Is the library react-native-charts-wrapper also working for Android? Or are you referring to your app in general?
2. Have you opened an issue against the library maintainer?
3. Do you have a stacktrace from the iOS log of what you're experiencing?

[MaxToyberman]

Hi @cortinico,

1. On Android, the library works fine when the newArch flag is disabled, but when it's enabled, no views are rendered. (same for iOS)

2. I noticed there are open issues regarding the migration to the new architecture, but it doesn't seem like it's moving forward. That's why I wanted to contribute. However, the iOS code is written entirely in Swift, which seems to pose a problem when migrating to Fabric. Is that correct?

3. I’ve included a stack trace in the issue. The app launches, but no views are visible.

Maybe there is an option to debug the interop layer ?

[cortinico]

1. On Android, the library works fine when the newArch flag is disabled, but when it's enabled, no views are rendered. (same for iOS)

Ok so it's broken for both Android & iOS. This was not clear in your original issue.

However, the iOS code is written entirely in Swift, which seems to pose a problem when migrating to Fabric. Is that correct?

@cipolleschi can provide more insights on this

Maybe there is an option to debug the interop layer ?

We're aware of scenarios where the Interop Layer doesn't work. For example if your view managers provide a custom shadow node implementation. That doesn't seem to be the case here (at least for Android) and would need a bit more of investigation.

[MaxToyberman]

Hi @cortinico sorry for the confustion.

The issue is only with iOS, will edit my original issue now

[MaxToyberman]

Hi @cortinico,

It seems I've managed to fix the issue, but I'd appreciate any insights you might have on the root cause. You can check out the change here:

react-native-charts-wrapper PR #1004

I noticed that when adjusting the frame size in the new architecture, the view becomes visible again.

another issue that i see is that the viewRegistry is empty, i found this ticket

[cortinico]

It seems I've managed to fix the issue, but I'd appreciate any insights you might have on the root cause. You can check out the change here:

@cipolleschi can help here as this is iOS specific

[MaxToyberman]

Hi @cipolleschi I have an issue with addUIBlock which looks like it was fixed here