Quick Implementation - React Native for Javascript

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

Before you begin

Please make sure you completed all processes in Quick Implementation - Android and Quick Implementation - iOS

1. Connect user

Connect user data where Stipop feature is needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
import {NativeModule} from 'react-native';
const {StipopModule} = NativeModules;
...

const TypingView ({userID}) => {
  ...
  useEffect(() => {
    StipopModule.connect(userID);
  }, []);
  ...
}
...
export default TypingView;

2. Add tap listeners

Add sticker tap listeners which is activated when a sticker is tapped.

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
import {NativeModules, NativeEventEmitter, Platform} from 'react-native';
const {StipopModule} = NativeModules;
...

var nativeEventEmitter = null;

switch (Platform.OS) {
  case 'android':
    const {StipopModule} = NativeModules;
    nativeEventEmitter = new NativeEventEmitter(StipopModule);
    break;

  case 'ios':
    const {StipopEmitter} = NativeModules;
    nativeEventEmitter = new NativeEventEmitter(StipopEmitter);
    break;
}

const TypingView () => {

  var stickerSingleTapListener = null;
  var stickerDoubleTapListener = null;

  const tapListenerInit = () => {
    stickerSingleTapListener = nativeEventEmitter.addListener(
      'onStickerSingleTapped',
      event => {
        console.log('Single tapped');
        const stickerImg = event.stickerImg;
        sendMessage(stickerImg);
      },
    );
    /* If you want to use double tap feature, change the plist file and implement this function. */
    stickerDoubleTapListener = nativeEventEmitter.addListener(
      'onStickerDoubleTapped',
      event => {
        console.log('Double tapped');
        const stickerImg = event.stickerImg;
        sendMessage(stickerImg);
      },
    );
  };

  const tapListenerRemove = () => {
    if (stickerSingleTapListener != null) {
      stickerSingleTapListener.remove();
    }
    if (stickerDoubleTapListener != null) {
      stickerDoubleTapListener.remove();
    }
  };
  ...

  useEffect(() => {
    tapListenerInit();

    return () => {
      tapListenerRemove();
    };
  }, []);
  ...
}

3. Show and Hide PickerView

Show and Hide PickerView as needed.

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
import {NativeModules, Platform, Keyboard} from 'react-native';
const {StipopModule} = NativeModules;
...

const TypingView () => {

  ...

  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
  const [isStipopShowing, setIsStipopShowing] = useState(false);

  var keyboardDidShowListener = null;
  var keyboardDidHideListener = null;

  const keyboardListenerInit = () => {
    keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', event => {
      setKeyboardVisible(true);
    });
    keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', event => {
      setKeyboardVisible(false);
      setIsStipopShowing(false);
    });
  };

  const keyboardListenerRemove = () => {
    if (keyboardDidHideListener != null) {
      keyboardDidHideListener.remove();
    }
    if (keyboardDidShowListener != null) {
      keyboardDidShowListener.remove();
    }
  };

  useEffect(() => {
    ...
    keyboardListenerInit();
    return () => {
      ...
      keyboardListenerRemove();
    };
  }, []);
  ...
  return (
    <ImageButton
    ...
    onPressOut={() => {
      switch (Platform.OS) {
        case 'android':
          StipopModule.show(isKeyboardVisible, isStipopShowing, resultBool => {
            setIsStipopShowing(resultBool);
          });
          break;
      
        case 'ios':
          StipopModule.show(
            isKeyboardVisible,
            isStipopShowing,
            (error, resultBool) => {
              setIsStipopShowing(resultBool);
            },
          );
          break;
      }
    }}
    />
  )
  ...
 
}

Was this page helpful?

We’re here to help. Contact us.

Back

Quick ImplementationIOS