TurboModules - resolve or reject return null in RN 0.72.3

[andrefelipeschulle]

Description

Description

I'm using a boilerplate to create a library using the turbo module, the implementation in the Android part was a success, but the implementation in the IOS part has been giving me a headache, the function without Promise (resolve or reject) is working and returning the values, but the function with resolve is returning null or does not finish. it will be a bug of the new architecture.

code typescript spec

import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export type CameraPermissionStatus =
  | 'authorized'
  | 'not-determined'
  | 'denied'
  | 'restricted';
export type CameraPermissionRequestResult = 'authorized' | 'denied';
export type EventCameraName = 'CameraPermission';

export interface Spec extends TurboModule {
  getCameraPermissionStatus(): CameraPermissionStatus;
  requestCameraPermission(): Promise<CameraPermissionRequestResult>;
}

export default TurboModuleRegistry.getEnforcing<Spec>('ReactNativePermissions');

code index.ts

import type {
  CameraPermissionStatus,
  CameraPermissionRequestResult,
} from './NativeReactNativePermissions';

export * from './hooks/useCameraPermission';

const ReactNativePermissions =
  require('./NativeReactNativePermissions').default;

export function getCameraPermissionStatus(): CameraPermissionStatus {
  return ReactNativePermissions.getCameraPermissionStatus();
}

export function requestCameraPermission(): Promise<CameraPermissionRequestResult> {
  return ReactNativePermissions.requestCameraPermission();
}

code ReactNativePermissions.h

#ifdef RCT_NEW_ARCH_ENABLED
#import "RNReactNativePermissionsSpec.h"

@interface ReactNativePermissions : NSObject <NativeReactNativePermissionsSpec>
#else
#import <React/RCTBridgeModule.h>

@interface ReactNativePermissions : NSObject <RCTBridgeModule>
#endif

@end

code ReactNativePermissions.mm

#import <AVFoundation/AVFoundation.h>
#import <React/RCTLog.h>

#import "RNReactNativePermissionsSpec.h"
#import "ReactNativePermissions.h"

@implementation ReactNativePermissions

RCT_EXPORT_MODULE()


// Don't compile this code when we build for the old architecture.
#ifdef RCT_NEW_ARCH_ENABLED
- (NSString *)getCameraPermissionStatus {
    RCTLogInfo(@"test");

    AVAuthorizationStatus status = [AVCaptureDevice authorizationStatusForMediaType:AVMediaTypeVideo];

    if(status == AVAuthorizationStatusAuthorized) {
      return @"authorized";
    } else if(status == AVAuthorizationStatusDenied) {
      return @"denied";
    } else if(status == AVAuthorizationStatusRestricted) {
      return @"restricted";
    }

    return @"not-dethermined";
}


- (void)requestCameraPermission: resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
    RCTLogInfo(@"test");

    NSString *result = @"1";
    resolve(result);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeReactNativePermissionsSpecJSI>(params);
}
#endif

@end

code App.tsx

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

import {requestCameraPermission} from '@brainylab/react-native-permissions';

export default function App() {
  // const {status, requestPermission} = useCameraPermission();

  const handleButton = async () => {
    console.log('init');
    const result = await requestCameraPermission();
    console.log('finally', result);
  };

  return (
    <View style={styles.container}>
      {/* <Text>Result: {status}</Text> */}
      <TouchableOpacity style={styles.button} onPress={handleButton}>
        <Text>Request Permission</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  button: {
    marginTop: 40,
    backgroundColor: 'green',
    padding: 10,
  },
});

console.log in App.tsx

const handleButton = async () => {
    console.log('init');
    const result = await requestCameraPermission();
    console.log('finally', result);
  };

result console.log

React Native Version

0.72.3

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1
Memory: 88.16 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.1
path: ~/.nvm/versions/node/v18.16.1/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v18.16.1/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK:
API Levels:
- "30"
- "31"
- "33"
- "33"
Build Tools:
- 30.0.3
- 31.0.0
- 33.0.0
System Images:
- android-30 | Google APIs ARM 64 v8a
- android-30 | Google Play ARM 64 v8a
- android-31 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.10121639
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.17
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

Steps to reproduce

console.log in App.tsx

const handleButton = async () => {
    console.log('init');
    const result = await requestCameraPermission();
    console.log('finally', result);
  };

result console.log

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

GitHub Repository
https://github.com/andrefelipeschulle/react-native-permissions

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

"react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "commonjs",
      "module",
      [
        "typescript",
        {
          "project": "tsconfig.build.json"
        }
      ]
    ]
  },

Link to repro

https://github.com/andrefelipeschulle/react-native-permissions

Environment

info Fetching system and libraries information...
System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1
Memory: 88.16 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.1
path: ~/.nvm/versions/node/v18.16.1/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v18.16.1/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:

• DriverKit 22.4
• iOS 16.4
• macOS 13.3
• tvOS 16.4
• watchOS 9.4
  Android SDK:
  API Levels:
• "30"
• "31"
• "33"
• "33"
  Build Tools:
• 30.0.3
• 31.0.0
• 33.0.0
  System Images:
• android-30 | Google APIs ARM 64 v8a
• android-30 | Google Play ARM 64 v8a
• android-31 | Google Play ARM 64 v8a
  Android NDK: Not Found
  IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
  version: 14.3.1/14E300c
  path: /usr/bin/xcodebuild
  Languages:
  Java:
  version: 11.0.17
  path: /usr/bin/javac
  Ruby:
  version: 2.6.10
  path: /usr/bin/ruby
  npmPackages:
  "@react-native-community/cli": Not Found
  react:
  installed: 18.2.0
  wanted: 18.2.0
  react-native:
  installed: 0.72.3
  wanted: 0.72.3
  react-native-macos: Not Found
  npmGlobalPackages:
  "react-native": Not Found
  Android:
  hermesEnabled: true
  newArchEnabled: true
  iOS:
  hermesEnabled: true
  newArchEnabled: true

[atlj]

One issue I see is the type mismatch. On typescript, you have added a custom type that returns with your promise but you are resolving that promise with a string on ios. Can you change it to be Promise<string> and try again?

[andrefelipeschulle]

One issue I see is the type mismatch. On typescript, you have added a custom type that returns with your promise but you are resolving that promise with a string on ios. Can you change it to be Promise<string> and try again?

I already did, error persists

[atlj]

It seems like your function signature is wrong.
I have created a PR for the original repository and I'm going to turn this into a discussion. Please check: https://github.com/brainylab/react-native-permissions/pull/1/files

I would have two recommendations for further development:

1. You can use breakpoints to verify whether your function is called on the native side properly.

You can click on the line number to toggle debug breakpoints.

2. On the new architecture, whenever you create typescript specs, your typescript types get turned into an interface during pod installation. And you can check whether your turbo module class conforms to your interface by making sure there is not a warning.

If you ever see this warning, please click on Fix to add the correct method signatures.