Implement Remote Push Notification Badges (IOS) on background React Native Apps

Andreas Beyer — Thu, 18 Jul 2024 12:54:26 +0000

For me it was somewhat annoying to find the simplest path to implement remote push notifications (PN) badges (ios) on background React Native apps.

I suppose you already have set up your PNs based on e.g. firebase.

We don't use the following approaches

the server controlled way setting apns.payload.aps.badge (It is annoying to handle that logic for each user in the backend)
the NotificationService.swift and UserDefaults approach (it is ok to write Swift, but it is still annoying to use XCode)

Ok let's go:

Make sure to request badge permissions, this took me quite a while to check that this is required, otherwise you'll receive PNs but no badge will ever appear anywhere - there won't even be the badge slider available in your app settings.

import { requestNotifications } from 'react-native-permissions'
...
React.useEffect(() => {
   requestNotifications(['alert', 'badge'])
},[])

Create a CloseStatePseudoApp to make sure that firebaseMessagings background messages run even if the app is in closed state


const MainApp  = () => ...

const ClosedStatePseudoApp = () => {
    React.useEffect(() => {
        SplashScreen.hide();
    }, []);

    return null;
};

AppRegistry.registerComponent('YourAppname', (props) =>
    props?.isHeadless ? ClosedStatePseudoApp() : MainApp()
);

Install @notifee/react-native (podinstall)
Set up firebaseMessagingService.setBackgroundMessageHandler somewhere in a effect hook, and make sure to call the notifee.incrementBadgeCount() method

import notifee from '@notifee/react-native';
import messaging from '@react-native-firebase/messaging';
const messagingService = messaging();

React.useEffect(() => {
   messagingService.setBackgroundMessageHandler(async (message:    RemoteMessage) => {
        console.log('messagingService.backgroundMessage', message);
        await notifee.incrementBadgeCount();
    });
},[])

To reset the badge count to 0, once the app went foreground, use react natives AppState and notifee to do so

import { AppState } from 'react-native';
import notifee from '@notifee/react-native';

AppState.addEventListener('change', (nextAppState) => {
    switch (nextAppState) {
        case 'active': {
            notifee.setBadgeCount(0);
        }
        default:
            return;
    }
});

Done.

React Native Paypal integration

Andreas Beyer — Mon, 19 Feb 2024 20:18:58 +0000

I recently undertook the task of integrating PayPal into a React Native project. My initial approach followed the guides of codecentric and Logrocket, which relied on utilizing PayPal's Smart Payment Buttons within a React (web) application. However, I found this method to be somewhat suboptimal for two reasons.

Firstly, it needs an additional dependency - the React (web) application hosting PayPal's Smart Payment Buttons. This, coupled with the bridging setup required to facilitate communication between React Native Webview and the React Web deployment, adds unnecessary complexity.

Secondly, you start the payment Process with PayPal's Smart Payment Buttons, which directly communicate with the paypal api and in the end return you an order id, which you then need to report to your own API again. But what about cases, where users should not be able to start a new payment process, because they have already paid the product or because they already have a PayPal subscription (and need to upgrade). You have to handle these things in the frontend and ask your API before you show PayPal's Smart Payment Buttons to your users. Another unnecessary step that adds to application complexity.

Alternatively, we can streamline the process by leveraging PayPal's HATEOAS links. When creating a PayPal order via the PayPal REST API, PayPal returns a payer_action link.

Similarly, when creating a PayPal subscription, an approve link is provided.

By utilizing these links generated via our API and transmitting them to the React Native app, we can stick them into e.g. React Native Webview and the user can start the payment approval process.

DEV Community: Andreas Beyer

Implement Remote Push Notification Badges (IOS) on background React Native Apps

React Native Paypal integration