React Native Allowing Haptics in iOS

Question

I want to test the allowHapticsAndSystemSoundsDuringRecording variable in my react native project. I know that there is an instance method that allows you to change this value but I'm not sure how to use it in the .mm file I've created for testing. I'm not familiar with Objective C or Swift so it makes things a bit more difficult. Just typing out setAllowHapticsAndSystemSoundsDuringRecording(true); in a .mm file throws an error cos the method is not recognized. Is this something I need to import from somewhere? I get that I probably have to create an instance of something but I'm not sure what that would be.

Answer 1

setAllowHapticsAndSystemSoundsDuringRecording is a method that is associated with the AVAudioSession class in iOS, and is not a React Native function or something you can directly use in a React Native JavaScript file.

The usage of this method means you're diving into native code, either Objective-C or Swift, and you have to be familiar with how to bridge between JavaScript in React Native and the native code. You're correct in understanding that this method needs to be called on an instance of AVAudioSession.

Here's a rough example of how you might use this in Objective-C, in the .mm file:

First, create a new file named MyAudioSessionManager.m in the ios folder of your React Native project.

// MyAudioSessionManager.m
#import <React/RCTBridgeModule.h>
#import <AVFoundation/AVFoundation.h>

@interface RCT_EXTERN_MODULE(MyAudioSessionManager, NSObject)
RCT_EXTERN_METHOD(setAllowHapticsAndSystemSounds:(BOOL)allow resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
@end

Then create the actual implementation of MyAudioSessionManager:

// MyAudioSessionManager.mm
#import "MyAudioSessionManager.h"

@implementation MyAudioSessionManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(setAllowHapticsAndSystemSounds:(BOOL)allow resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  AVAudioSession *session = [AVAudioSession sharedInstance];
  NSError *error;

  if ([session setCategory:AVAudioSessionCategoryPlayAndRecord mode:AVAudioSessionModeDefault options:AVAudioSessionCategoryOptionAllowBluetoothA2DP | AVAudioSessionCategoryOptionDefaultToSpeaker | AVAudioSessionCategoryOptionAllowAirPlay error:&error]) {
    if (@available(iOS 13.0, *)) {
      [session setAllowHapticsAndSystemSoundsDuringRecording:allow error:&error];
    } else {
      reject(@"Not available", @"setAllowHapticsAndSystemSoundsDuringRecording is not available for this iOS version", error);
      return;
    }

    [session setActive:YES error:nil];
    resolve(@(YES));
  } else {
    reject(@"Error", @"Error setting up audio session category", error);
  }
}

@end

This is a simple usage and does not handle all possible errors. The actual implementation should take care to handle any possible errors properly.

Finally, to expose this functionality to React Native, you'll need to use React Native's bridging capabilities. You can create a new native module or method, expose it to React Native, and then call it from your JavaScript code.

Example:

import { NativeModules } from 'react-native';

// Inside a component or function
NativeModules.MyAudioSessionManager.setAllowHapticsAndSystemSounds(true)
  .then(() => console.log('Haptics and System Sounds set successfully'))
  .catch((error) => console.error('Error setting Haptics and System Sounds:', error));

You can read more about native modules in React Native in the official React Native documentation: Native Modules (iOS).

Remember, manipulating AVAudioSession directly is a relatively advanced operation that requires careful error handling and understanding of iOS audio behavior, so only do this if you're sure it's necessary. In many cases, you might be able to accomplish what you need using higher-level APIs provided by React Native or by libraries available in the community.