CALLKIT FOR ANDROID IN REACT NATIVE + TWILIO

README.md

• http://belka.us/en/callkit-android-react-native/
• https://github.com/hoxfon/react-native-twilio-programmable-voice/issues/56

activity_call_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/RelativeLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">
        <Button
            android:id="@+id/accept_call_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="ACCEPT" />
        <Button
            android:id="@+id/reject_call_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="REJECT" />
    </LinearLayout>
</RelativeLayout>

AndroidManifest.xml

...

<permission
        android:name="android.permission.INTERACT_ACROSS_USERS_FULL"
        android:protectionLevel="signature" />

...

<activity android:name=".UnlockScreenActivity" />

MainFirebaseMessagingService.java

public class MainFirebaseMessagingService extends FirebaseMessagingService {
    ...
    public void onMessageReceived(RemoteMessage remoteMessage) {
        ...
        if (remoteMessage.getData().size() > 0) {
          ...
                @Override
                public void onCallInvite(final CallInvite callInvite) {
                    ...
                    handler.post(new Runnable() {
                        public void run() {                           
                            ...
                            if (context != null) {
                                ...
                                // showUnlockScreen(context, callInvite);
                                MainFirebaseMessagingService.this.handleIncomingCall((ReactApplicationContext)context, notificationId, callInvite, launchIntent);
                            } else {                                
                                ...
                                mReactInstanceManager.addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
                                    public void onReactContextInitialized(ReactContext context) {
                                        ...
                                        // showUnlockScreen(context, callInvite);                                        
                                        Intent launchIntent = callNotificationManager.getLaunchIntent((ReactApplicationContext)context, notificationId, callInvite, true, appImportance);
                                        context.startActivity(launchIntent);
                                        MainFirebaseMessagingService.this.handleIncomingCall((ReactApplicationContext)context, notificationId, callInvite, launchIntent);
                                    }
                                });
                                ...
                            }
                        }
                    });
                }
                ...
            });
        }
        ...
    }

    private void handleIncomingCall(ReactApplicationContext context,
                                    int notificationId,
                                    CallInvite callInvite,
                                    Intent launchIntent
    ) {
        showUnlockScreen(context, callInvite);
        sendIncomingCallMessageToActivity(context, callInvite, notificationId);
        // showNotification(context, callInvite, notificationId, launchIntent);
    }

    private void showUnlockScreen(ReactContext context, CallInvite callInvite) {
        if (callInvite.getState() == CallInvite.State.CANCELED || callInvite.getState() == CallInvite.State.REJECTED) {
            return;
        }
        Intent i = new Intent(context, UnlockScreenActivity.class);
        i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);
        // i.putExtra("callInvite", callInvite);
        // i.putExtra("notificationId", notificationId);
        // i.putExtra("launchIntent", launchIntent);
        startActivity(i);
    }
}

twilio.tsx

  componentDidMount() {
    this.addEventListeners()
  }

  componentWillUnmount () {
    this.removeEventListeners()
  }

  addEventListeners () {
    if (Platform.OS === 'android') {
      DeviceEventEmitter.addListener('accept', this.accept)
    }
  }

  removeEventListeners () {
    if (Platform.OS === 'android') {
      DeviceEventEmitter.removeListener('accept', this.accept)
    }
  }

UnlockScreenActivity.java

public class UnlockScreenActivity extends ReactActivity implements UnlockScreenActivityInterface {

    private static final String TAG = "MessagingService";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN | WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
        | WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED | WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD);

        setContentView(R.layout.activity_call_incoming);

        final ReactContext reactContext = getReactInstanceManager().getCurrentReactContext();

        Button acceptCallBtn = (Button) findViewById(R.id.accept_call_btn);
        acceptCallBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                WritableMap params = Arguments.createMap();
                params.putBoolean("done", true);
                sendEvent(reactContext, "accept", params);
                finish();
            }
        });
        
        Button rejectCallBtn = (Button) findViewById(R.id.reject_call_btn);
        rejectCallBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                WritableMap params = Arguments.createMap();
                params.putBoolean("done", false);
                sendEvent(reactContext, "accept", params);
                finish();
            }
        });
    }
    
    @Override
    public void onConnected() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                ...
            }
        });
    }

    private void sendEvent(ReactContext reactContext, String eventName, WritableMap params) {
        reactContext
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit(eventName, params);
    }
}

UnlockScreenActivityInterface.java

package com.nossomedico;

import com.facebook.react.bridge.ReadableMap;

public interface UnlockScreenActivityInterface {
    public void onConnected();

    public void onDisconnected();

    public void onConnectFailure();

    public void onIncoming(ReadableMap params);
}

Please add short read me how can it be used in react native android?