Stipop Docs | Documentation for SDK and API

Quick Implementation - React Native for Android

You can integrate Stipop into your app in a minute by using Stipop Android SDK.

Before you begin

Please make sure you completed all processes in Before You Begin - Android

1. Create StipopClass and StipopModule

Create (StipopClass & StipopModule) and Implement functions using native Stipop Android SDK.

StipopClass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import android.util.Log;

import androidx.annotation.NonNull;
import androidx.fragment.app.FragmentActivity;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

import java.util.Locale;

import io.stipop.Stipop;
import io.stipop.StipopDelegate;
import io.stipop.models.SPPackage;
import io.stipop.models.SPSticker;

enum StipopDelegateFunction{
  onStickerSingleTapped, onStickerDoubleTapped, onStickerPackRequested
}

public class StipopClass {

  private static StipopClass instance = new StipopClass();

  private StipopClass() {}

  public static StipopClass getInstance() {
      return instance;
  }

  void connect(
          ReactContext reactContext,
          String userID
  ) {

      StipopDelegate stipopDelegate = new StipopDelegate() {

          @Override
          public boolean onStickerSingleTapped(@NonNull SPSticker spSticker) {
              // This function will be executed when user chooses a sticker.
              Log.e("Stipop : ","onStickerSingleTapped");
              WritableMap params = Arguments.createMap();
              params.putInt("packageId", spSticker.getPackageId());
              params.putInt("stickerId", spSticker.getStickerId());
              params.putString("stickerImg", spSticker.getStickerImg());
              reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                      .emit(StipopDelegateFunction.onStickerSingleTapped.name(), params);

              return true;
          }

          /* If you want to use double tap feature, change the plist file and implement this function. */
          @Override
          public boolean onStickerDoubleTapped(@NonNull SPSticker spSticker) {
              // This function will be executed when user clicks a sticker twice.
              Log.e("Stipop : ","onStickerSingleTapped");
              WritableMap params = Arguments.createMap();
              params.putInt("packageId", spSticker.getPackageId());
              params.putInt("stickerId", spSticker.getStickerId());
              params.putString("stickerImg", spSticker.getStickerImg());
              reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                      .emit(StipopDelegateFunction.onStickerDoubleTapped.name(), params);
              return true;
          }

          /* If return value is true, user can download sticker packages. */
          @Override
          public boolean onStickerPackRequested(@NonNull SPPackage spPackage) {
              Log.e("Stipop : ","onStickerPackRequested");
              WritableMap params = Arguments.createMap();
              params.putInt("packageId", spPackage.getPackageId());
              params.putString("packageName", spPackage.getPackageName());
              params.putString("packageImg", spPackage.getPackageImg());
              reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                      .emit(StipopDelegateFunction.onStickerPackRequested.name(), params); // Emit what you need.
              return true;
          }
      };

      Stipop.Companion.connect(
              (FragmentActivity) reactContext.getCurrentActivity(),
              userID,
              stipopDelegate,
              null,
              null,
              Locale.getDefault(),
              null
      );
  }
}

StipopModule
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class StipopModule extends ReactContextBaseJavaModule {

  public StipopModule(ReactApplicationContext reactContext) {
      super(reactContext);
  }

  @Override
  public String getName() {
      return "StipopModule";
  }
  
  @ReactMethod
  public void connect(String userID) {
      StipopClass.getInstance().connect(getReactApplicationContext(), userID);
  }

  @ReactMethod
  public void show(Boolean isKeyboardVisible, Boolean isStipopShowing, Callback callback){
      
      getReactApplicationContext().getCurrentActivity().runOnUiThread(new Runnable(){
          @Override
          public void run() {
              Stipop.Companion.show();
          }
      });

      if(isKeyboardVisible){
          if(isStipopShowing){
              callback.invoke(false);
          } else {
              callback.invoke(true);
          }
      } else {
          callback.invoke(true);
      }
  }

  @ReactMethod
  public void addListener(String eventName) {
  }

  @ReactMethod
  public void removeListeners(Integer count) {
  }
}

2. Create StipopPackage and Add StipopModule

Create StipopPackage and Export StipopModule.

StipopPackage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class StipopPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      return Arrays.<NativeModule>asList(
              new StipopModule(reactContext)
      );
  }
}

3. Add StipopPackage to your application class

Add StipopPackage.

Application
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.stipopdemo.newarchitecture.MainApplicationReactNativeHost;
import com.stipopdemo.stipop.StipopPackage;

import java.lang.reflect.InvocationTargetException;
import java.util.List;

import io.stipop.Stipop;

public class MainApplication extends Application implements ReactApplication {

  ...

  private final ReactNativeHost mReactNativeHost =
  new ReactNativeHost(this) {
      @Override
      public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
      }

      @Override
      protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new StipopPackage());
          return packages;
      }

      @Override
      protected String getJSMainModuleName() {
          return "index";
      }
  };

  ...

}

We’re here to help. Contact us.