React-native-notifee: Foreground Service notification not removing after resolve()

[ashokkumar88]

Hi,
I am displaying a notification with asForegroundService:true with two action buttons. Also registered the registerForegroundService event. But when click on the Action button it does not remove the notification. Below is my code

notifee.registerForegroundService((notification) => {
  return new Promise(resolve => {    

    notifee.onForegroundEvent(({ type, detail }) => {       
      notifee.cancelDisplayedNotification(notification.id)
      if (type === EventType.ACTION_PRESS && detail.pressAction.id === 'stopnotification') {
        console.log(type,detail); // i am getting this on console
        return resolve();
      }
    });

  });
});

[mikehardy]

Hey @ashokkumar88 - I assume this is android? I assume you are on the current release version? Can you specify those details?

Also, if you could provide a minimal App.js - that shows this problem with no other code necessary so we could drop it in a test app (like that generated by https://github.com/mikehardy/rnfbdemo/blob/master/notifee-demo.sh ) that would help us determine where the problem is

Thanks in advance - hopefully we can get this fixed up quickly

[ashokkumar88]

@mikehardy Yes, it is in android using the latest version. IOS not checked. I will provide a minimal App.js shortly.

[mikehardy]

just a quick note that "latest version" is dependent on time and sometimes issues span releases while doing triage/fix - for the avoidance of doubt: that's version v0.15.1 ?

[ashokkumar88]

yes, it is 0.15.1

[ashokkumar88]

App.js

import React, {Component} from 'react';  
import {StyleSheet, Text, View,TouchableOpacity} from 'react-native'; 
import notifee,{AndroidImportance,EventType} from '@notifee/react-native'; 

notifee.registerForegroundService((notification) => {
  return new Promise(resolve => {    

    notifee.onForegroundEvent(({ type, detail }) => { 
      console.log(notification);      
      if (type === EventType.ACTION_PRESS && detail.pressAction.id === 'stopnotification') {
        console.log(type,detail)
        return resolve();
      }
    });

  });
});  

const displayNotification = async () => {
    const channelId = await notifee.createChannel({
      id: 'alerts',
      name: 'Notification Channel',
    });

  await notifee.displayNotification({
  title: 'Foreground Service Notification',
  body: 'Press the Quick Action to stop the service',
  android: {
    channelId,
    actions: [
      {
        title: 'Stop',
        pressAction: {
          id: 'stopnotification',
        },
      },
    ],
  },
});
}



type Props = {};  
export default class App extends Component<Props> {  
  render() {  
    return (  
      <View style={styles.container}>  
        <Text style={styles.welcome}>Welcome to React Native!</Text>  
        <TouchableOpacity onPress={this.displayNotification}><Text style={styles.instructions}>Display Notification</Text>  </TouchableOpacity>

      </View>  
    );  
  }  
}  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor: '#F5FCFF',  
  },  
  welcome: {  
    fontSize: 20,  
    textAlign: 'center',  
    margin: 10,  
  },  
  instructions: {  
    textAlign: 'center',  
    color: '#333333',  
    marginBottom: 5,  
  },  
});

[mikehardy]

@ashokkumar88 fantastic - thanks for the reproduction. Sorry again that you are having trouble but we should be to find a resolution now