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. It contains: the library aar, this user guide, reference documentation, and sample apps for calling.

Add the Sinch library

The Sinch SDK library is distributed in AAR format. To use it in your project either:

• Copy the .aar file to the libs folder and edit the build.gradle file to include

repositories {
    flatDir {
        dirs 'libs'
    }
}

dependencies {
    implementation(name:'sinch-android-rtc', version:'+', ext:'aar')
}

• Or using Android Studio choose File -> New -> New Module -> Import .JAR/.AAR Package option

Running ProGuard

If you are using ProGuard, we bundle an example proguard-project.txt file that makes sure that the Sinch SDK will work as expected.

Permissions

A minimum set of permissions are needed for the app to use the Sinch SDK. These are specified in the AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.CAMERA"/>

Verify Manifest in Runtime

To verify that the manifest has the necessary permissions the SinchClient.checkManifest()` can also be used to check whether required permissions are granted by the user in runtime. An example of how to dynamically request missing permissions can be found in the sample applications that comes with the SDK.

Note: This method takes into consideration the features which were enabled for the app (for example, calling, respecting native calls). Call SinchClient.checkManifest() after the setup but before the start of the SinchClient.

Adding the Sinch library to React Native application

With an extra layer of (NativeModule, you can embed the Sinch Android library into your React Native application. Note, however, that by doing this the SDK will only work on React Native apps running on Android 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. Copy the Sinch library .aar file to your-react-native-app/android/app/libs/ (create the libs folder if it isn't there already).
2. Locate the your-react-native-app/android/app/build.gradle/ file. Find the dependencies section there and add implementation fileTree(dir: "libs", include: ["*.aar"]) entry.
3. To be able to access the Sinch SDK API from within your React Native application follow the Android 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:

public class SinchModule extends ReactContextBaseJavaModule implements SinchClientListener {

    static final String APP_KEY = "<YOUR_APP_KEY>";
    static final String APP_SECRET = "<YOUR_APP_SECRET>";
    static final String ENVIRONMENT = "ocra.api.sinch.com";

    private Handler mainThreadHandler = new Handler(Looper.getMainLooper());

    private static final String TAG = SinchModule.class.getSimpleName();

    private SinchClient mSinchClient;
    private String mUserId;

    public SinchModule(@Nullable ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @NonNull
    @Override
    public String getName() {
        return "SinchModule";
    }

    @ReactMethod
    public void createClient(String userId) {
        mainThreadHandler.post(() -> {
            mUserId = userId;
            mSinchClient = Sinch.getSinchClientBuilder().context(getReactApplicationContext()).userId(userId)
                    .applicationKey(APP_KEY)
                    .environmentHost(ENVIRONMENT)
                    .build();
            mSinchClient.addSinchClientListener(this);
            mSinchClient.start();
            Log.d(TAG, "Starting SinchClient");
        });
    }

    @Override
    public void onClientStarted(SinchClient sinchClient) {
        Log.d(TAG, "onClientStarted called");
    }

    @Override
    public void onClientFailed(SinchClient sinchClient, SinchError sinchError) {
        Log.e(TAG, "onClientFailed called: " + sinchError.getMessage());
    }

    @Override
    public void onLogMessage(int i, String s, String s1) {
    }

    @Override
    public void onPushTokenRegistered() {
        Log.d(TAG, "onPushTokenRegistered called");
    }

    @Override
    public void onPushTokenRegistrationFailed(SinchError sinchError) {
        Log.e(TAG, "onPushTokenRegistrationFailed called: " + sinchError.getMessage());
    }

    @Override
    public void onCredentialsRequired(ClientRegistration clientRegistration) {
        clientRegistration.register(JWT.create(APP_KEY, APP_SECRET, mUserId));
    }

    @Override
    public void onUserRegistered() {
        Log.d(TAG, "onUserRegistered called");
    }

    @Override
    public void onUserRegistrationFailed(SinchError sinchError) {
        Log.e(TAG, "onUserRegistrationFailed called: " + sinchError.getMessage());
    }
}

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 Java files, every time you change the code you'll have to rerun npx react-native run-android 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.