invertase / notifee

⚛️ A feature rich notifications library for React Native.
https://notifee.app
Apache License 2.0
1.88k stars 228 forks source link

Sometimes not showing notification android #1006

Closed getsettalk closed 6 months ago

getsettalk commented 8 months ago

I have tried to find more solution but not found , for why not showing notification with notifee .... i'm using notifee with FCM

My React-native Version is : 0.73.5 Android Device: 10+ Device Name: Realme, Vivo

Sometime we fire notification than showing but sometime it not showing (FCM)

Here is my Code:

export const showSimpleNotification = async (title, body, image = "", largeIcon = "") => {
    try {
        // Request permission if not granted
        const permission = await notifee.requestPermission();

        console.log("showSimp", body)
        // Create a channel if it doesn't exist
        const channelId = await notifee.createChannel({
            id: 'OneSalarySimple',
            name: 'OneSalary Simple',
            importance: AndroidImportance.HIGH,
            sound: 'default'
        });

        // Create the notification options
        let notificationOptions = {
            title,
            body,
            android: {
                channelId,
                smallIcon: 'ic_launcher', // Replace with your small icon
                largeIcon: largeIcon != "" ? largeIcon : 'ic_launcher',
                showTimestamp: true,
                pressAction: {
                    launchActivity: "default",
                    id: "default",
                },

            },
        };

        // Check if image is a non-empty string
        if (image && typeof image === 'string' && image !== "") {
            notificationOptions = {
                ...notificationOptions,
                android: {
                    ...notificationOptions.android,
                    style: {
                        type: AndroidStyle.BIGPICTURE,
                        picture: image,
                    },
                    bigText: body, // Add bigText property here
                },
            };
        } else {
            // If no image provided, use BIGTEXT style
            notificationOptions = {
                ...notificationOptions,
                android: {
                    ...notificationOptions.android,
                    style: { type: AndroidStyle.BIGTEXT, text: body },
                },
            };
        }

        // Create the notification
        const notification = await notifee.displayNotification(notificationOptions);

        console.log('Notification displayed Simple:', notification);

    } catch (error) {
        console.error('Error displaying notification Simple:', error);
    }
};

i'm listining background notification (index.js):

index.js

/**
 * @format
 */
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { showColoredNotification, showSimpleNotification } from './src/utils/Notifee';
import messaging from '@react-native-firebase/messaging';
import notifee, { EventType } from '@notifee/react-native';

notifee.onBackgroundEvent(async ({ type, detail }) => {
    const { notification, pressAction } = detail;
    // console.log("notifee notification",notification)
    // Check if the user pressed the "Mark as read" action 
    if (type === EventType.ACTION_PRESS && pressAction.id === 'mark-as-read') {
        // Remove the notification
        await notifee.cancelNotification(notification.id);
    }
});

// here logic and App.js logic are same for  notification.............
messaging().setBackgroundMessageHandler(async remoteMessage => {
    if (remoteMessage.notification) {
        // Handle the message with data payload (custom data)
        showColoredNotification(remoteMessage.data.titleColor, remoteMessage.notification?.title, remoteMessage.notification?.body, remoteMessage.data.BigImageUrl);
    } else if (remoteMessage.data && Object.keys(remoteMessage.data).length > 0) {
        if (remoteMessage.data.isColor == "Yes") {
            showColoredNotification(remoteMessage.data.titleColor, remoteMessage.data.title, remoteMessage.data.body, remoteMessage.data.BigImageUrl);
        } else {
            showSimpleNotification(remoteMessage.data.title, remoteMessage.data.body, remoteMessage.data.BigImageUrl)
        }
        // Handle the message with notification payload
    }
});

AppRegistry.registerComponent(appName, () => App);

"@notifee/react-native": "^7.8.2",

Please Provide me a better solution ... i think this is a bug and most of developer are facing this issue.

DarkcoderSe commented 8 months ago

There are some background restrictions in new Android versions. Most of the mobile manufacturers added battery optimization feature, and this feature prevents the background services running alltime. so that might be the reason, more detail here: https://notifee.app/react-native/docs/android/background-restrictions But I think, its not an good idea to asking users to disable battery optimization for their apps. Idk how whatsapp, snapchat etc still manages to send notification while battery optimization is ON.

github-actions[bot] commented 7 months ago

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.