Integrating the Switchboard SDK Into a React Native Project

In order to use the Switchboard SDK in a React Native application you need to set up a native module that you can import in your JavaScript code. You need to create a separate native module for all platforms that you support.

iOS Native Module

Integrate the Switchboard iOS SDK into the React Native generated iOS project by following the iOS Integration Guide.

You can put together your audio engine in a Swift file and only expose the methods that you will need to call from JavaScript. The following code snippet creates an audio engine with a sine tone generator.

Swift

import SwitchboardSDK

@objc(RCTAudioEngineModule)
class RCTAudioEngineModule : NSObject {

  let audioEngine = SBAudioEngine()
  let audioGraph = SBAudioGraph()
  let sineGeneratorNode = SBSineGeneratorNode()

  override init() {
    super.init()
    audioGraph.addNode(sineGeneratorNode)
    audioGraph.connect(sineGeneratorNode, to: audioGraph.outputNode)
  }

  @objc
  func start() {
    audioEngine.start(audioGraph)
  }

  @objc
  func stop() {
    audioEngine.stop()
  }

  @objc
  func setFrequency(_ newValue: Float) {
      sineGeneratorNode.frequency = newValue
  }

  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

To export the Swift methods of the above class you need to create an Objective-C file that marks the methods external.

Objective-C

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(RCTAudioEngineModule, NSObject);

RCT_EXTERN_METHOD(start)
RCT_EXTERN_METHOD(stop)
RCT_EXTERN_METHOD(setFrequency:(float)newFrequency)

@end

To learn more about iOS native modules you can check out the React Native documentation site.

Android Native Module

Integrate the Switchboard Android SDK into the React Native generated Android project by following the Android Integration Guide.

It's important to initialize the Switchboard SDK before using any of its components, including audio nodes. The best place to perform this initialization is within the MainApplication class, which extends Application(), ReactApplication, specifically in its onCreate method. Avoid initializing the SDK in MainActivity, as this may lead to issues. For instance, the createNativeModules method of your MyAppPackage class is invoked before any activity, and your native module classes might already include Switchboard SDK components.

You can put together your audio engine in a Kotlin file and only expose the methods that you will need to call from JavaScript. The following code snippet creates an audio engine with a sine tone generator. The methods you want to export are marked with @ReactMethod.

Kotlin

import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.synervoz.switchboard.sdk.audioengine.AudioEngine
import com.synervoz.switchboard.sdk.audiograph.AudioGraph
import com.synervoz.switchboard.sdk.audiographnodes.SineGeneratorNode

class AudioEngineModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    val audioEngine = AudioEngine(reactContext)
    val audioGraph = AudioGraph()
    val sineGeneratorNode = SineGeneratorNode()

    init {
        audioGraph.addNode(sineGeneratorNode)
        audioGraph.connect(sineGeneratorNode, audioGraph.outputNode)
    }

    override fun getName(): String {
        return "AudioEngineModule"
    }

    @ReactMethod
    fun start() {
        audioEngine.start(audioGraph)
    }

    @ReactMethod
    fun stop() {
        audioEngine.stop()
    }

    @ReactMethod
    fun setFrequency(newFrequency: Float) {
        sineGeneratorNode.frequency = newFrequency
    }

}

To tell your app about this module you also need to create a ReactPackage subclass that returns your custom native module.

Kotlin

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

class MyAppPackage : ReactPackage {

    override fun createViewManagers(
        reactContext: ReactApplicationContext
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()

    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): MutableList<NativeModule> = listOf(AudioEngineModule(reactContext)).toMutableList()
}

To learn more about Android native modules you can check out the React Native documentation site.

Using the Native Module from JavaScript

After the native module is set up you can import it and call it in your JavaScript code. For example, you can add the following code in App.js. This code sets up two functions that start and stop the Switchboard SDK audio engine. If you followed the above steps you should hear a generated sine tone when you call the start method.

JavaScript

import { NativeModules } from 'react-native'

const onStartButtonPressed = () => {
  NativeModules.AudioEngineModule.start()
}

const onStopButtonPressed = () => {
  NativeModules.AudioEngineModule.stop()
}