Skip to content

Integrate with React Native

Currently GetSocial SDK does not have a React Native module, it is planned for the near future.
Until then we created a small guide how can you create your own module to be able to use GetSocial SDK from your app.

The guide is based on the official React Native’s Native modules documentation.

Native module setup

To create GetSocial React Native module, you will need a third party tool called react-native-create-library.

1
npm install -g react-native-create-library

Now you can create the bridge module:

1
react-native-create-library GetSocialBridge --prefix `` --platforms 'ios,android'

GetSocialBridge will be the name of the module, feel free to change it.

After GetSocialBridge module is created, you need to install it to be able to use it in your app.

1
2
cd GetSocialBridge
npm install

Now go to your applications folder, open package.json and add GetSocialBridge as local dependency:

1
2
3
4
5
6
...
"devDependencies": {
    ...
    "getsocial-core": "file:../GetSocialBridge" // path to GetSocialBridge module created earlier
    ...
}

Run npm install to update dependencies.

Android

  1. Append the following lines to android/settings.gradle:
    1
    2
    include ':react-native-get-social-bridge'
    project(':react-native-get-social-bridge').projectDir = new File(rootProject.projectDir,  '../node_modules/react-native-get-social-bridge/android')
    
  2. Open up android/app/src/main/java/[...]/MainApplication.java
    • Add import com.reactlibrary.GetSocialBridgePackage; to the imports at the top of the file
    • Add new GetSocialBridgePackage() to the list returned by the getPackages() method:
      1
      2
      3
      4
      5
      6
      7
      @Override
      protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              ...
              new GetSocialBridgePackage());
      }
      
  3. Add GetSocial frameworks as dependency to build.gradle file of react-native-get-social-bridge module:
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    ...
    repositories {
        jcenter()
        maven { url 'http://maven.getsocial.im/' }
    }
    ...
    dependencies {
        ...
        implementation('im.getsocial:getsocial-core:[6,7)@aar')
        implementation('im.getsocial:getsocial-ui:[6,7)@aar')
        ...
    }
    
  4. Add the following lines to android/build.gradle:
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    buildscript {
        ...
        repositories {
            ...
            maven {
                url "https://plugins.gradle.org/m2/"
            }
        }
        ...
    }
    
    dependencies {
        ...
        classpath "gradle.plugin.im.getsocial:plugin:[0,1)"
    }
    
  5. Add plugin to android/app/build.gradle file:

    1
    2
    ...
    apply plugin: 'im.getsocial'
    

  6. Get your GetSocial App Id from the “App settings” section on the GetSocial Dashboard:

    GetSocial App Id

  7. In the same file, set GetSocial Application ID:

    1
    2
    3
    4
    5
    6
    android {
        ...
        getsocial {
            appId "<YOUR_APP_ID>"
        }
    }
    

  8. Insert the following lines inside the dependencies block in android/app/build.gradle file:

    1
    compile project(':react-native-get-social-bridge')
    

Please note this is the basic integration of GetSocial SDK, for complete guide check out the manual integration guide.

iOS

  1. Download the latest GetSocial frameworks from the Downloads page.
  2. In Xcode, in the project navigator, right click LibrariesAdd Files to [your project’s name]
  3. Go to node_modulesreact-native-get-social-bridge and add GetSocialBridge.xcodeproj
  4. In Xcode, in the project navigator, select your project. Add libGetSocialBridge.a to your project’s Build PhasesLink Binary With Libraries
  5. Select General and add GetSocial.framework and GetSocialUI.framework to Embedded Binaries section.
  6. Get your GetSocial App Id from the “App settings” section on the GetSocial Dashboard:

    GetSocial App Id
    1. Edit Info.plist file and add your GetSocial Application ID:

    1
    2
    3
    4
    <plist>
    ...
    <key>im.getsocial.sdk.AppId</key>
    <string><YOUR_APP_ID></string>
    

Please note this is the basic integration of GetSocial SDK, for complete guide check out the manual integration guide.

Implementation examples

To be able to interact with the new module, first you have to import it into your App.js file and create a reference to it:

1
2
3
import {NativeModules} from 'react-native';
...
var getsocial = NativeModules.GetSocialBridge;

We added 3 sample methods with their native implementations as an example.

  1. Check if SDK is initialized:
    1
    console.log("SDK Initialized: " + getsocial.isInitialized());
    
  2. Register a callback to be notificed when SDK gets initialized:
    1
    2
    3
    getsocial.onInitialized(() => {
        console.log("GetSocial SDK is initialized.");
    });
    
  3. Send an invite:
    1
    2
    3
    4
    5
    getsocial.sendInvite("email", (error, events) => {
        console.log("invite sent");
    }, (error) => {
        console.log("error while sending an invite: " + error.domain);
    });
    

Android Bridge Code

Add your bridge method’s to GetSocialBridgeModule.java file.

Example implementation of GetSocial.whenInitialized call:

1
2
3
4
5
6
7
8
9
@ReactMethod
public void onInitialized(final Callback callback) {
    GetSocial.whenInitialized(new Runnable() {
        @Override
        public void run() {
            callback.invoke();
        }
    });
}

Example implementation of GetSocial.isInitialized() call:

1
2
3
4
@ReactMethod
public boolean isInitialized() {
    return GetSocial.isInitialized();
}

Example implementation of GetSocial.sendInvite(...) call:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
@ReactMethod
public void sendInvite(String channelId, final Callback successCallback, final Callback failureCallback) {
    GetSocial.sendInvite(channelId, new InviteCallback() {
        @Override
        public void onComplete() {
            successCallback.invoke();
        }

        @Override
        public void onCancel() {
            failureCallback.invoke("canceled");
        }

        @Override
        public void onError(Throwable throwable) {
            failureCallback.invoke(throwable.getMessage());
        }
    });
}

iOS Bridge Code

Add your bridge method’s to GetSocialBridge.m file.

Example implementation of [GetSocial executeWhenInitialized] call:

1
2
3
4
5
RCT_EXPORT_METHOD(onInitialized:(RCTResponseSenderBlock)callback) {
    [GetSocial executeWhenInitialized:^{
        callback(@[[NSNull null]]);
    }];
}

Example implementation of [GetSocial isInitialized] call:

1
2
3
RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(id, isInitialized) {
    return @([GetSocial isInitialized]);
}

Example implementation of [GetSocial sendInvite...] call:

1
2
3
4
5
6
7
8
9
RCT_EXPORT_METHOD(sendInvite:(NSString*)channelId success:(RCTResponseSenderBlock)successCallback failure:(RCTResponseErrorBlock)failureCallback) {
    [GetSocial sendInviteWithChannelId:channelId success:^{
        successCallback(@[[NSNull null]]);
    } cancel:^{
        failureCallback([NSError errorWithDomain:@"RNGetSocialRN" code:100 userInfo:nil]); // define your own error code for cancel callback
    } failure:^(NSError * _Nonnull error) {
        failureCallback(error);
    }];
}

Still have questions?

If you still have a questions how to integrate GetSocial SDK in to a React Native application, send a message to our support team.

Give us your feedback! Was this article helpful?

😀 🙁