First Time Setup

Follow this step-by-step guide to set up the Sinch Voice and Video SDK for the first time.

Register an Application

1. Register a Sinch Developer account here .
2. Setup a new Application using the Dashboard where you can then obtain an Application Key and an Application Secret .

Download

The Sinch SDK can be downloaded here.

The SDK is available in both ObjC and Swift.

Both SDK's comes with sample apps. Read more about them here

Sinch SDK as a CocoaPod

Add the Sinch.xcframework (ObjC version)

Drag the Sinch.xcframework bundle from the SDK distribution package folder into the Frameworks section in the Xcode Project Navigator.

Add the SinchRTC.xcframework (Swift version)

Drag the SinchRTC.xcframework bundle from the SDK distribution package folder into the Frameworks section in the Xcode Project Navigator.

Both versions of Sinch SDKs depends on the following frameworks which must be linked with the application target:

libc++.dylib (libc++.tbd), libz.tbd, Security.framework, AVFoundation.framework, AudioToolbox.framework, VideoToolbox.framework, CoreMedia.framework, CoreVideo.framework, CoreImage.framework, GLKit.framework, OpenGLES.framework, QuartzCore.framework, Metal.framework

Info.plist

For voice calling functionality, add the following to your Info.plist:

• Required background modes ( UIBackgroundModes ):
  • App plays audio (or streams audio/video using AirPlay) ( audio )
  • App provides Voice over IP services ( voip )
• Privacy - Microphone Usage Description ( NSMicrophoneUsageDescription ):

  NSMicrophoneUsageDescription describes the reason your app accesses the microphone. When the system prompts the user to allow access, this string is displayed as part of the alert, and it can't be left empty.

In addition to the keys above, if video calling functionality will be enabled and used, add the following to your Info.plist:

• Privacy - Camera Usage Description ( NSCameraUsageDescription ):

  NSCameraUsageDescription describes the reason that your app accesses the camera. When the system prompts the user to allow access, this string is displayed as part of the alert, and it can't be left empty.

Adding the Sinch library to React Native application

With an extra layer of (NativeModule, you can embed the Sinch iOS library into your React Native application. Note, however, that by doing this the SDK will only work on React Native apps running on iOS devices. In order to be able to work with other platforms you'll have to implement a NativeModule for each of these platforms separately (including different platform-specific Sinch SDKs).

To add the Sinch library to a React Native application:

1. Open your native iOS ReactiveNative application in xCode. Use the xcworkspace file located at <YourReactNativeApp/ios . If the file doesn't exist run pod install inside the iOS folder.
2. Drag the Sinch library .xcframework file to Frameworks xCode group.
3. To be able to access the Sinch SDK API from within your React Native application follow the iOS Native Module Guide on the official React Native developer portal.

The following code sample is a very basic example of a SinchModule that would allow a user with a given ID to be logged into the SDK:

Header file:

#ifndef RCTSinchModule_h
#define RCTSinchModule_h

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

@interface RCTSinchModule : NSObject <RCTBridgeModule>

@property (nonatomic, strong) _Nullable id<SINClient> client;


@end

#endif /* RCTSinchModule_h */

Implementation:

#import "RCTSinchModule.h"
#import <React/RCTLog.h>

#pragma mark - SINCallClientDelegate
@interface RCTSinchModule (SINCallClientDelegate) <SINCallClientDelegate>
@end

#pragma mark - SINClientDelegate
@interface RCTSinchModule (SINClientDelegate) <SINClientDelegate>
@end

@implementation RCTSinchModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(createClient:(NSString *)userId)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    RCTLogInfo(@"Creating iOS client for userId %@", userId);
    NSError *error;
    self.client = [Sinch clientWithApplicationKey:@"<your-app-key>"
                                                environmentHost:@"ocra.api.sinch.com"
                                                         userId:userId
                                                          error:&error];
    self.client.delegate = self;
    self.client.callClient.delegate = self;
    [self.client start];
  });
}

@end

@implementation RCTSinchModule (SINClientDelegate)

- (void)client:(id<SINClient>)client requiresRegistrationCredentials:(id<SINClientRegistration>)registrationCallback {
  [registrationCallback registerWithJWT:@"user-jwt"];
}

- (void)clientDidStart:(id<SINClient>)client {
  NSLog(@"Client did start");
}

- (void)clientDidFail:(id<SINClient>)client error:(NSError *)error {
  NSLog(@"Client did fail");
}

@end

After registering that module you will be able to call createClient method from your Javascript code like this:

const { SinchModule } = NativeModules;
const MainScreen = ({ navigation }) => {
  const onPress = () => {
    SinchModule.createClient('myUserId');
  };
  return (
    <Button
      title="LOGIN"
      onPress={onPress}
    />
  );
};

Two things should be noted here:

1. Because you're editing native iOS files, every time you change the code you'll have to rerun npx react-native run-ios command in order to test your changes.
2. The above example acts only as an entry point showing how to interact with the Sinch SDK from your React Native App. For more complete use cases that handle errors and various callbacks, see the samples folder of the Sinch SDK archive. Above all, that snippet does not handle any error validations or sanity checks like making sure Sinch client is not already initialized or started.