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?

Please share import of files, example WakefulBroadcastReceiver of import androidx.legacy.content.WakefulBroadcastReceiver, import com.facebook.react.ReactActivity of ReactActivity and so on, many thanks!