Search code examples
firebasereact-nativefirebase-cloud-messagingfirebase-notificationsreact-native-firebase

React Native: Firebase notification not showing


When trying to send test notification from Firebase my app does not receive any event. In the notification composer I am picking specifically the fcmToken of my iOS device:

Notification composer

I have checked that I am using the right fcmToken and authentication keys.

Could it have something to do with the version of react-native-firebase that I am using? Or that the initialization routine is in the react-navigator?

  • react-native-firebase@5.5.6
  • react-navigation@3.11.1

Navigator.js

export default class Navigator extends Component {
    constructor(props) {
        super(props)
    }

    async componentDidMount() {
        FirebaseService.checkPermission();

FirebaseService.createNotificationListeners(); }

    //Remove listeners allocated in createNotificationListeners()
    componentWillUnmount() {
        FirebaseService.notificationListener();
        FirebaseService.notificationOpenedListener();
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                    <Route
                        onNavigationStateChange={(prevState, currentState) => {
                            const currentScreen = getActiveRouteName(currentState);
                            const prevScreen = getActiveRouteName(prevState);
                            nav.activeRouteName = currentScreen;

                            if (prevScreen !== currentScreen) {

                                if (currentScreen == "captureView") {
                                    this.resetSafearea("never")
                                } else {
                                    this.resetSafearea("always")
                                }
                            }
                        }}
                    />
            </View>
        );
    }
}

FirebaseService.js

import AsyncStorage from '@react-native-community/async-storage';
import Firebase from "react-native-firebase";

export default class FirebaseService {

    //1
    static checkPermission = async () => {
        const enabled = await Firebase.messaging().hasPermission();
        if (enabled) {
            FirebaseService.getToken();
        } else {
            FirebaseService.requestPermission();
        }
    }

    //2
    static requestPermission = async () => {
        try {
            await Firebase.messaging().requestPermission();
            // User has authorised
            FirebaseService.getToken();
        } catch (error) {
            // User has rejected permissions
            console.log('permission rejected');
        }
    }

    //3
    static getToken = async () => {
        let fcmToken = await AsyncStorage.getItem('fcmToken');
        if (!fcmToken) {
            fcmToken = await Firebase.messaging().getToken();
            if (fcmToken) {
                // user has a device token
                await AsyncStorage.setItem('fcmToken', fcmToken);
            }
        }
        return fcmToken;
    }

    static createNotificationListeners = async () => {
        /*
        * Triggered when a particular notification has been received in foreground
        * */
        FirebaseService.notificationListener = Firebase.notifications().onNotification((notification) => {
            const { title, body } = notification;
            console.log("notification", notification);
        });

        /*
        * If your app is in background, you can listen for when a notification is clicked / tapped / opened as follows:
        * */
        FirebaseService.notificationOpenedListener = Firebase.notifications().onNotificationOpened((notificationOpen) => {
            const { title, body } = notificationOpen.notification;
            console.log("notification", notification);
        });

        /*
        * If your app is closed, you can check if it was opened by a notification being clicked / tapped / opened as follows:
        * */
        const notificationOpen = await Firebase.notifications().getInitialNotification();
        if (notificationOpen) {
            const { title, body } = notificationOpen.notification;
            console.log("notification", notification);
        }
        /*
        * Triggered for data only payload in foreground
        * */
        FirebaseService.messageListener = Firebase.messaging().onMessage((message) => {
            //process data message
            console.log("message", JSON.stringify(message));
        });

        console.log("Notification listeners created.");
    }       
}

Solution

  • The reason was that the push notification certificate was not installed on my system (there was no error showing it).

    You will need one for development and one for production https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/establishing_a_certificate-based_connection_to_apns