Native iOS Component RCTDirectEventBlock callback always nil

[ninjz]

Description

I just upgraded to 0.68.2 from 0.63.4 and suddenly one of my custom native components stopped working. I narrowed down the issue to the section of Swift code which uses a callback which is to be provided as a prop to the component.

I have a prop onReady which is a RCTDirectEventBlock and it always returns nil now and I'm unable to execute the callback from the native code.

Version

0.68.3

Output of npx react-native info

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 141.03 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2021.12.13.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0
      System Images: android-29 | ARM 64 v8a, android-29 | Intel x86 Atom_64, android-31 | Google APIs ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Create a native component using Swift which accepts a callback prop of type RCTDirectEventBlock
2. Render the component and assign a callback function to the assigned prop.
3. See that the callback is not detected in the native component and always returns nil.

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

Here is a sample of my code:

import SKExercisePlayer

@objc(RNTExerciseView)
class RNTExerciseView: UIView {
  @objc var onReady: RCTDirectEventBlock?
  
  @objc var exercises: NSArray = [] {
    didSet {
      if _sceneView != nil {
        // Load all exercise animations into memory
        exercises.forEach { item  in
          _loadExercise(item as! NSDictionary)
        }
      }
      
      if onReady != nil {
        onReady!([
          "success": true,
          "loaded": exercises.count
        ])
      }
    }
  ...
}

Here the onReady callback is never executed. And there is a callback provided as a prop on the component 100%.

Am I the only one experiencing this? I'm also wondering if this is isolated to using Swift here as well. Any help is greatly appreciated. Thanks

[ninjz]

Ok after some investigation I see the issue seems to be that the onReady prop is not yet set. If you were to call onReady inside layoutSubviews() it will be available.

It seems that in the previous react native version the ordering of the instantiation of the props may have been different or that it waited for all the props to have been initialized before calling didSet. Now I'm calling onLoad in the layoutSubviews() function.

Would it be safe to assume that everything inside of the didSet observers have been executed to completion prior to layoutSubviews() being called?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.