The listener works fine only on the first install

[Rupesh0109]

When I install my app for the first time the listener works perfectly

When I close the app from recent apps and open it again it is no longer fetching the notification and only works when I uninstall and again re install the app

index.js

import { AppRegistry } from 'react-native';
import { RNAndroidNotificationListenerHeadlessJsName } from 'react-native-android-notification-listener';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { name as appName } from './app.json';
import App from './App';

// Headless Task to listen for notifications
const headlessNotificationListener = async ({ notification }) => {
if (notification) {
try {
const data = JSON.parse(notification);

  if (data.app === 'com.google.android.apps.maps') {
    let timeStr, distanceStr, etaStr;

    // Split the time string into time, distance, and eta
    const timeData = data.subText?.split(' · ') || [];
    timeStr = timeData[0] || '';
    distanceStr = timeData[1] || '';
    etaStr = timeData[2] || '';

    // Clean the eta string if it exists
    const cleanedEtaStr = etaStr ? etaStr.replace(' ETA', '') : '';

    const necdata = {
      icon: data.iconLarge,
      time: timeStr,
      direction: data.text,
      distance: data.title,
      totdistanc: distanceStr,
      eta: cleanedEtaStr,
    };

    // Store navigation data in AsyncStorage
    await AsyncStorage.setItem('@navigationNotification', JSON.stringify(necdata));
  } else {
    // Handle other notifications
    const otherData = {
      icon: data.iconLarge,
      text: data.text,
      app: data.app,
    };

    // Store other notifications in AsyncStorage
    await AsyncStorage.setItem('@otherNotification', JSON.stringify(otherData));
  }
} catch (error) {
  console.error('Error storing notification:', error);
}

}
};

AppRegistry.registerHeadlessTask(
RNAndroidNotificationListenerHeadlessJsName,
() => headlessNotificationListener
);

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

App.tsx

import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
Text,
Button,
View,
Switch,
AppState,
ScrollView,
FlatList,
Image,
} from 'react-native';
import RNAndroidNotificationListener from 'react-native-android-notification-listener';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from './styles';

let interval: any = null;

interface INotificationProps {
time?: string;
direction?: string;
distance?: string;
icon: string;
eta?: string;
totdistanc?: string;
text?: string;
app?: string;
groupedMessages?: any[];
}

const Notification: React.FC = ({
icon,
time,
direction,
distance,
eta,
totdistanc,
text,
}) => {
const [timeStr, distanceStr, etaStr] = time?.split(' · ') || [];
const cleanText = (text: string) => text.replace(/\u00A0/g, ' ');

return (
    <View style={styles.notificationWrapper}>
        <View style={styles.notification}>
            <View style={styles.imagesWrapper}>
                {!!icon && (
                    <View style={styles.notificationIconWrapper}>
                        <Image source={{ uri: icon }} style={styles.notificationIcon} />
                    </View>
                )}
            </View>
            <View style={styles.notificationInfoWrapper}>
                {!!timeStr && (
                    <Text style={styles.textInfo}>{`Time: ${cleanText(timeStr)}`}</Text>
                )}
                {!!distanceStr && (
                    <Text style={styles.textInfo}>{`Distance: ${cleanText(distanceStr)}`}</Text>
                )}
                {!!etaStr && (
                    <Text style={styles.textInfo}>{`ETA: ${cleanText(etaStr)}`}</Text>
                )}
                {!!eta && !etaStr && (
                    <Text style={styles.textInfo}>{`ETA: ${cleanText(eta)}`}</Text>
                )}
                {!!direction && (
                    <Text style={styles.textInfo}>{`Direction: ${cleanText(direction)}`}</Text>
                )}
                {!!distance && (
                    <Text style={styles.textInfo}>{`Distance: ${cleanText(distance)}`}</Text>
                )}
                {!!totdistanc && (
                    <Text style={styles.textInfo}>{`Total Distance: ${cleanText(totdistanc)}`}</Text>
                )}
                {!!text && <Text style={styles.textInfo}>{text}</Text>}
            </View>
        </View>
    </View>
);

};

function App() {
const [hasPermission, setHasPermission] = useState(false);
const [lastNotification, setLastNotification] = useState(null);
const [selectedApp, setSelectedApp] = useState('com.google.android.apps.maps');
const [appEnabled, setAppEnabled] = useState({
maps: true,
phone: false,
whatsapp: false,
other: false,
});

const handleOnPressPermissionButton = async () => {
    RNAndroidNotificationListener.requestPermission();
};

const fetchLatestNotification = async () => {
    console.log("Fetching latest notification...");
    try {
        const lastStoredNotification =
            selectedApp === 'com.google.android.apps.maps'
                ? await AsyncStorage.getItem('@navigationNotification')
                : await AsyncStorage.getItem('@otherNotification');

        if (lastStoredNotification) {
            const notificationData = JSON.parse(lastStoredNotification);
            console.log("Fetched notification data:", notificationData);
            setLastNotification({ ...notificationData }); // Create a new reference
        } else {
            setLastNotification(null);
        }
    } catch (error) {
        console.error('Failed to fetch notification:', error);
    }
};

const handleAppStateChange = async (nextAppState: string, force = false) => {
    console.log("App state changed to:", nextAppState);
    if (nextAppState === 'active' || force) {
        const status = await RNAndroidNotificationListener.getPermissionStatus();
        setHasPermission(status !== 'denied');

        // Always fetch notifications and force state update
        fetchLatestNotification()
            .then(() => console.log("Fetched notifications after app became active."))
            .catch(err => console.error("Error fetching notifications on state change:", err));
    }
};

useEffect(() => {
    clearInterval(interval);
    if (AppState.currentState === 'active') {
        interval = setInterval(() => {
            fetchLatestNotification();
        }, 1000);
    }

    const listener = AppState.addEventListener('change', handleAppStateChange);
    handleAppStateChange('', true);

    return () => {
        clearInterval(interval);
        listener.remove();
    };
}, [selectedApp]);

const toggleAppNotifications = (app: string, value: boolean) => {
    setAppEnabled(prev => ({ ...prev, [app]: value }));
};

const hasGroupedMessages =
    lastNotification &&
    lastNotification.groupedMessages &&
    lastNotification.groupedMessages.length > 0;

return (
    <SafeAreaView style={styles.container}>
        <View style={styles.buttonWrapper}>
            <Text
                style={[
                    styles.permissionStatus,
                    { color: hasPermission ? 'green' : 'red' },
                ]}>
                {hasPermission
                    ? 'Allowed to handle notifications'
                    : 'NOT allowed to handle notifications'}
            </Text>
            <Button
                title="Open Configuration"
                onPress={handleOnPressPermissionButton}
                disabled={hasPermission}
            />
        </View>

        {/* App Selection */}
        <View style={styles.appSelectionWrapper}>
            <Text style={styles.header}>Select App for Notifications</Text>
            <View style={styles.switchContainer}>
                <View style={styles.switchWrapper}>
                    <Switch
                        value={appEnabled.maps}
                        onValueChange={value => toggleAppNotifications('maps', value)}
                    />
                    <Text>Google Maps</Text>
                </View>
                <View style={styles.switchWrapper}>
                    <Switch
                        value={appEnabled.phone}
                        onValueChange={value => toggleAppNotifications('phone', value)}
                    />
                    <Text>Phone</Text>
                </View>
                <View style={styles.switchWrapper}>
                    <Switch
                        value={appEnabled.whatsapp}
                        onValueChange={value => toggleAppNotifications('whatsapp', value)}
                    />
                    <Text>WhatsApp</Text>
                </View>
                <View style={styles.switchWrapper}>
                    <Switch
                        value={appEnabled.other}
                        onValueChange={value => toggleAppNotifications('other', value)}
                    />
                    <Text>Other</Text>
                </View>
            </View>
        </View>

        {/* Display Notifications */}
        <View style={styles.notificationsWrapper}>
            {lastNotification && !hasGroupedMessages && appEnabled.maps && (
                <ScrollView style={styles.scrollView}>
                    <Notification {...lastNotification} />
                </ScrollView>
            )}
            {lastNotification && hasGroupedMessages && appEnabled.maps && (
                <FlatList
                    data={lastNotification.groupedMessages}
                    keyExtractor={(_, index) => index.toString()}
                    renderItem={({ item }) => <Notification {...item} />}
                />
            )}
        </View>
    </SafeAreaView>
);

}

export default App;

Kindly check this code and help me with my app

[Rupesh0109]

Fixed this by disabling battery optimisation to the app