Asking Notification Permission in Android 13 for a React Native Application.

Introduction

In this post we will look into how we can ask the user to allow notifications in the android part in our react native app when the user has Android version 13 and above installed in their device. For the android versions below 13 (that is 12 and 11 and below), notifications where enabled by default. But from version 13 and above it is mandatory to ask permission from the user to enable notification and the notification is turned off (and blocked if the necessary permissions are not present in the AndroidManifest.xml file).

So let us look into how we can prompt the user to enable notifications in all the versions of react native (Because this was introduced in react native version 71 and developers using less than version 71 have no tutorial to make this work. This post solves that for you). I will be entering into node_modules etc to make some modifications.

Installation

This post assumes you have already created a react native project and installed the following libraries and have made required changes in the android folder like adding code in AndroidManifest.xml to customise notifications etc. If not you can go to the terminal and install the necessary libraries below and make the necessary changes from the below link.

npm i react-native-push-notification

https://www.npmjs.com/package/react-native-push-notification

Now coming to Android 13 Notification specific code, we have to change the compile SDK in the build.gradle to 33 as android 13 supports SDK version 33 and above. Now go to the AndroidManifest.xml and paste the following permission to enable in notification.

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

The android code is done.

Now let us move to the react native side of things. For react native versions less than 71.0, the POST_NOTIFICATIONS is not present in its source code. So if we call this function we will get Permissions null error and the app crashes instantly. So I discovered a solution to this problem. What you have to do is, go to the node_modules folder and go into the React Native folder and into the Libraries folder and into PermissionsAndroid folder and open the PermissionAndroid.js file. For more clarity I have added a gif below for you to follow.

Now what you have to do is add the code in each of the section in this PermissionAndroid.js file. I have attached a gif to let you know where to place the code.

In Permissions = Object.freeze({}) add the following code.

POST_NOTIFICATIONS: 'android.permission.POST_NOTIFICATIONS',

In class PermissionsAndroid add the following code.

 POST_NOTIFICATIONS: string,

Now go to build.gradle in android folder and change compileSDK and targetSDK version to 33 as asking permissions in Android 13 requires use a higher version. Keep the minSdkVersion version above 21 as well.

compileSdkVersion = 33
targetSdkVersion = 33

Now rebuild your react native app and simply use the below code to ask permission from the user. You can use the below code as a reference to request notification permission.

import {
  PermissionsAndroid,
  Platform,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import React from 'react';

const NotificationPermission = () => {
  const checkApplicationPermission = async () => {
    if (Platform.OS === 'android') {
      try {
        await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
        );
      } catch (error) {
      }
    }
  };

  return (
    <View>
      <TouchableOpacity
        onPress={() => {
          checkApplicationPermission();
        }}>
        <Text>NotificationPermission</Text>
      </TouchableOpacity>
    </View>
  );
};

export default NotificationPermission;

You can use the above code to ask notification permissions for a user with an android device whose Android version is 13 and above. This post was made to solve this issue and save other react native developer's time. I faced this problem with the app I am currently working on as there were no available tutorials in the internet.

Conclusion

That is how you enable and ask notifications and enable in an android device with version 13 and above in a react native application.

To know more about React & React Native you can checkout my courses in Udemy.

https://www.udemy.com/course/react-native-for-absolute-beginners-with-react-hooks/

Comments

[Rahul Vyas]

Do I really need to add the mentioned push notifications library? I'm using firebase messaging and notifee library for push notification. Can you update the article how to fix the target SDK 33 issue with these?

[narayanthapa]

Yes, you can utilize this for prompting notifications, and for other functionalities, you can incorporate FCM.

[Lakshit Rattan]

One issue with this now, when app is in background, upon clicking the notification, the app is supposed to open up from background to home page. But actually it does nothing at all, and the notification disappears. Happens only in android 13. Using @react-native-firebase/app and @react-native-firebase/messaging for notifications. Any leads with this ?

[Gautham Vijayan]

This also happens in Android 14. So I am using notifee with FCM combo to get it working for my apps.

[Nahuel Rodriguez]

Handy guide! it really helped me but only in the emulator, I don't understand why in the real device it never asks for permission, being exactly the same code. Any idea?

[Gautham Vijayan]

You have to check if the android version you are using is 13 and above. It wont ask if version is less than 12.

[Nahuel Rodriguez]

Thank you for explaining why it do not ask for permission. However, I am facing an issue where the notification appears in the emulator but not on a real device.

[Gautham Vijayan]

Yeah please check if the android version is 13 or above in your real device and let me know.

[Nahuel Rodriguez]

I was able to solve it based on what you told me, by not asking for permission the validation that arrived was a different one, instead of 'granted' it was 'never ask again'. My emulator was a different android version than my mobile.

[Gautham Vijayan]

Glad to know it worked!

[Atul Tiwaree]

thanks man there were 0 tutorial regarding this

[Gautham Vijayan]

Glad it helped you out.

[yash nerkar]

How to use this component and where should I import

[Andrew Zey]

Thank you, this saved us a ton of headache!

[sourav dey]

Thanks dude

[Johhan Santana]

life saver dude! Right now updating react native from 0.65 to .70+ has been such a pain just for updating the android sdk api version. One thing I wanted to add is if you don't want to always make the changes when doing npm install or yarn install is to use patch-package library to make a patch of the changes which will save those edits even if you clean your node_modules folder and reinstall

yarn patch-package react-native

I wanted to ask if there was a way to check if the app has permissions for notifications without asking the user? We had a logic that checked the permission using react native firebase library with messaging().hasPermission() but this now does not work.

Thanks!