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
Java
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
Java
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
Java
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
Java
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";
}
};
...
}
Was this page helpful?
We’re here to help. Contact us.