Making the app ring... a work in progress

Ever since I started working on a teleconsultation app, one of the great-to-haves (a.k.a. why do we still not have this yet?) is to make the app ring instead of asking people to wait inside. The app is built using React Native, so most of my knowledge was naturally JavaScript-centric. That is to say, my knowledge about the native side of things was not solid.

I dabble from time to time in the native world, usually to add features or fix deprecated code; I think it's safe to say that I can read code, and I am capable of googling things, therefore I can try things out and see if work or not. These were all easy fixes.

The app actually had a way to make itself appear to the user, but it's a method that only works for the lower versions of Android. It's now 2023, Android 10 was released 4 years ago, and with it, a lot of changes were introduced.

Let's just go to the exciting part

Notifee was the notification package that replaced react-native-push-notification, the latter struggled with support and maintenance. Surprisingly, I never got to try react-native-notificaions, not sure why.

So anyway, with Notifee you can add a fullScreenAction wherein you define the activity that you want to launch. If you're not familiar, then you should definitely read up what Android Activities are (note: I never read that page). In essence, I think you can just think of them as "screens" on Android similar to how you would have a screen using React Navigation.

Now, you need a few things set up first before you can have it working:

1. You need to create an activity file—create the file as a sibling of MainActivity.java

    /// IncomingCallActivity.java
   
    package com.rnincomingcall;
   
    import com.facebook.react.ReactActivity;
   
    public class IncomingCallActivity extends ReactActivity {
      @Override
      protected String getMainComponentName() {
        return "incoming-call-activity";
      }
    }
   

2. Define that Activity in your Android Manifest

          <activity
                  android:name="com.rnincomingcall.IncomingCallActivity"
                  android:showWhenLocked="true"
                  android:turnScreenOn="true"
                  android:launchMode="singleTop"
                  android:showOnLockScreen="true"
                  android:exported="false"
          />
   

    <!-- Don't forget to add these permissions! -->
        <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
        <!-- Xiaomi and similar devices overlay configs -->
        <uses-permission android:name="android.permission.ACTION_MANAGE_OVERLAY_PERMISSION" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
   

3. Register that component on React Native—like a typical react/screen component. Make sure to have it in your index.js

    /// Activity_IncomingCallScreen is a React Component
    AppRegistry.registerComponent(
      'incoming-call-activity',
      () => Activity_IncomingCallScreen,
    );
   

When you have everything correctly set-up (including Notifee example), you should be able to see your component show up when you press the notification

Check out the repository below if you want to just test it out (note that it's a work in progress, so files are moving on the main branch)

I shall be back for part 2... when I finally get what I wanted (i.e. passing data, launching different components etc)

Repository

https://github.com/marqroldan/react-native-incoming-call