Android: Fullscreen notification bypasses lockscreen and presents entire app (Incoming Calls)

Hi everyone and thanks to the authors for open-sourcing and maintaining this

Use case: Incoming Call on Lock Screen.

After this exact sequence 1- killing the app 2- awakening it with server-sent high importance notification below 3- dismissing the notification 4- locking the screen 5- resending the same notification

The notification bypasses lockscreen and just opens the app on top of it, every time, without entering passcode, with full access to the app (but not past the lock screen). Seems like a big footgun.

Is this a bug or a feature ?

More generally: Is it possible today with notifee to get basic Incoming Call notifications going? With similar behavior users expect: turns on lock screen, occupies it full screen and displays/vibrates/rings until interacted with.

mainComponent sounds like a good lead but it isn’t quite clear in the docs what it can or cannot do (props? navigate back to main app?)

const displayCallNotificationAndroid = async ({
  callId,
  callerName,
  hasVideo,
}: {
  callId: string;
  callerName: string;
  hasVideo: boolean;
}) => {
  console.log('📞 📥  displayCallNotificationAndroid: ', callId);

  const channelId = await notifee.createChannel({
    id: 'nugget-calls',
    name: 'nugget-calls',
    importance: AndroidImportance.HIGH,
  });

  const dnr = await notifee.displayNotification({
    title: callerName,
    body: `is calling you on ${hasVideo ? 'video' : 'voice'}...`,
    id: callId,
    android: {
      channelId,
      smallIcon: 'ic_launcher_round',
      color: '#dedede',
      category: AndroidCategory.CALL,
      importance: AndroidImportance.HIGH,
      fullScreenAction: {
        id: 'default',
      },
      actions: [
        {
          title: 'Decline',
          pressAction: {
            id: 'decline-call',
          },
        },
        {
          title: 'Answer',
          pressAction: {
            id: 'answer-call',
          },
        },
      ],
      lightUpScreen: true,
      // asForegroundService: true,
      colorized: true,
    },
  });
  console.log('🔭 displayNotification result: ', dnr);
};

Samsung s10e 
Android 12
compileSdkVersion = 31
"react-native": "^0.68.0",
"@react-native-firebase/app": "^13.0.1",
"@react-native-firebase/messaging": "^13.0.1",
"@notifee/react-native": "^5.4.1",

Thanks!

[pierguinzani]

@shawarmaz I had some issues with callkeep and have been working with notifee to solve this problem. In my case, I created a custom activity - CustomActivity.java in android/app/java/com/MyApp :

package com.myapp;

import com.facebook.react.ReactActivity;

public class CustomActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "custom";
  }
}

Next, I created a simple incoming call notification with notifee:

        title: '(21) 1234-1234',
        body: 'Incoming call',
        android: {
            channelId: 'call',
            category: AndroidCategory.CALL,
            visibility: AndroidVisibility.PUBLIC,
            importance: AndroidImportance.HIGH,
            smallIcon: 'myapp_icon',
            timestamp: Date.now(),
            showTimestamp: true,
            pressAction: {
                id: "default",
                launchActivity: 'com.myapp.CustomActivity',
            },
            actions: [{
                title: "Accept",
                pressAction: {
                    id: "accept",
                    launchActivity: 'default',
                }
            }, {
                title: 'Decline',
                pressAction: {
                    id: "reject",
                }
            }],
            fullScreenAction: {
                id: 'default',
                launchActivity: 'com.myapp.CustomActivity',
            },
        },

The fullScreenAction, which calls a customActivity, is an important part of this implementation.

And then, I needed to register this component in my index.js:

import { AppRegistry } from 'react-native';
import React from 'react';
import App from './src';
import IncomingCall from './src/screens/IncomingCall';


AppRegistry.registerComponent(appName,  App);

AppRegistry.registerComponent('custom', IncomingCall); //A custom component with two buttons to attend and decline the incoming call

I also configured my AndroidManifest.xml this way:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.myapp">

    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-feature android:name="android.hardware.audio.output" />
    <uses-feature android:name="android.hardware.microphone" />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- Permission configs -->
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.CALL_PHONE" />
    <uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
    <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
    <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
    <uses-permission android:name="android.permission.READ_CALL_LOG" />
    <uses-permission android:name="android.permission.USE_SIP" />
    <!-- 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" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity
        android:name="com.myapp.CustomActivity"
        android:showWhenLocked="true"
        android:turnScreenOn="true"
        android:launchMode="singleTop"
        android:showOnLockScreen="true"
      />
    </application>
</manifest>

This part will probably solve your problem because you will give permission to show only the custom component (Incoming Call) on the locked screen.

<activity
        android:name="com.myapp.CustomActivity"
        android:showWhenLocked="true"
        android:turnScreenOn="true"
        android:launchMode="singleTop"
        android:showOnLockScreen="true"
      />

[mikehardy]

mikehardy, would the lockscreen check be something that you guys would consider integrating into notifee? It’s really the only piece missing for the Incoming Call feature if we use this approach

Absolutely, that’s really useful in combination with intentional / intended support for this use case

If so, is there perhaps a means to place a bounty on this feature to speed things up?

Not sure that would actually help, I think we’re all about 300% utilized at the moment 😆 - along with you I’m sure

I’d also be willing to try my hand at writing the native module myself but I’ve never written Android. If you don’t think the feature itself is all that complicated, I may just give it a shot smile along with a nice PR to the docs

It looks trivial as a bit of code - https://stackoverflow.com/a/8668648/9910298

The hard part will be to implement it well here. I think this belongs in the core library as a feature really, then with react-native wrapping it.

@helenaford if you could wave a wand and say: "drop a boolean method right here in android/.... and then call it from right here in packages/react-native/... where would you put them?