import React, {useEffect} from "react";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {TabNavigatorParamList} from "./types";
import MaterialCommunityIcons from "react-native-vector-icons/Ionicons";
import MapScreen from "../../screens/map/MapScreen";
import SettingsScreen from "../../screens/settings/SettingsScreen";
import messaging from "@react-native-firebase/messaging";
import {useAppDispatch, useAppSelector} from "../../store/appStore/store";
import {saveFcmToken} from "../../store/slices/deviceSlice";
import GeofencesScreen from "../../screens/geofences/GeofencesScreen";
import useSendPush from "../../hooks/useSendPush";
import BackgroundGeolocation from "react-native-background-geolocation";
import {
geoFenceAction,
onDisplayNotification,
} from "../../screens/settings/utils";
import {Alert} from "react-native";
## Expected Behavior
The app should trigger a push notification when a user enters a geofence, regardless of whether the app is in the foreground, background, or closed
## Actual Behavior
When the app is in the foreground, the user receives notifications upon entering a geofence. However, if the app is closed, there are no triggers on geofence entry
## Steps to Reproduce
1. Clone the project from [GitHub](https://github.com/Gentlekboy/pushNotificationApp)
2. Install dependencies and set up the environment
3. Close the app and enter a geofence area
## Context
I am trying to trigger push notifications for users when they enter a geofence. The notifications work fine when the app is in the foreground but fail to trigger when the app is closed
## Debug logs
<!-- include iOS / Android logs
- ios XCode logs,
- use #getLog #emailLog methods (@see docs)
- Android: $ adb logcat -s TSLocationManager
-->
<details><summary>Logs</summary>
``` <!-- Syntax highlighting: DO NOT REMOVE -->
PASTE_YOUR_LOGS_HERE
Your Environment
react-native -v
): 0.74.0const Tab = createBottomTabNavigator();
const TabNavigator = () => { const dispatch = useAppDispatch();
const {onSendPush} = useSendPush();
const {deviceSlice, settingsSlice} = useAppSelector( state => state.rootReducer, ); const {isBackgroundServiceRunning} = settingsSlice; const {deviceId} = deviceSlice;
useEffect(() => { const requestUserPermission = async () => { const authStatus = await messaging().requestPermission(); const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
}, [messaging, deviceId]);
useEffect(() => { BackgroundGeolocation.ready({ desiredAccuracy: BackgroundGeolocation.DESIRED_ACCURACY_HIGH, distanceFilter: 10, stopTimeout: 5, debug: true, logLevel: BackgroundGeolocation.LOG_LEVEL_VERBOSE, stopOnTerminate: false, startOnBoot: true, }) .then(state => { console.log("- BackgroundGeolocation Status: ", state.enabled); }) .catch(error => console.log("Background location ready failed", error));
}, []);
useEffect(() => { if (isBackgroundServiceRunning) { BackgroundGeolocation.start() .then(res => console.log("BackgroundGeolocation.start", res.enabled)) .catch(err => console.log("BackgroundGeolocation.start", err)); } else { BackgroundGeolocation.stop() .then(res => console.log("BackgroundGeolocation.stop", res.enabled)) .catch(err => console.log("BackgroundGeolocation.stop", err)); } }, [isBackgroundServiceRunning]);
return ( <Tab.Navigator screenOptions={{ tabBarActiveTintColor: "#e91e63", }}> <Tab.Screen name="Home" component={MapScreen} options={{ tabBarLabel: "Home", tabBarIcon: ({color, size}) => (
); };
export default TabNavigator;