I am trying to build a simple app that shows local (in-app notifications) following the official Expo docs

This is how my code looks like:

import {Button, StyleSheet, View} from 'react-native';
import * as Notifications from "expo-notifications";

Notifications.setNotificationHandler({
    handleNotification: async () => ({
        shouldShowAlert: true,
        shouldPlaySound: true,
        shouldSetBadge: true,
    }),
});

export default function App() {

    function scheduleNotification() {
        Notifications.scheduleNotificationAsync({
            content: {
                title: 'Look at that notification',
                body: "I'm so proud of myself!",
            },
            trigger: {
                seconds: 3
            }
        });
    }

    return (
        <View style={styles.appContainer}>
            <Button title={'Schedule notification'} onPress={scheduleNotification} />
        </View>
    );
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});

This is how I set up the plugin in app.js

"plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/icon.png",
          "color": "#ffffff",
          "defaultChannel": "default",
          "enableBackgroundRemoteNotifications": false
        }
      ]
    ]

And this is the content of my package.json

{
  "name": "react-native-test-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.19",
    "expo-linear-gradient": "^14.0.1",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-svg": "^15.10.1",
    "expo-notifications": "~0.29.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I am testing on Android Studio emulator. When I press the button no notification is shown at all. Maybe the setNotificationHandler is not on the right place ?

I am trying to build a simple app that shows local (in-app notifications) following the official Expo docs

This is how my code looks like:

import {Button, StyleSheet, View} from 'react-native';
import * as Notifications from "expo-notifications";

Notifications.setNotificationHandler({
    handleNotification: async () => ({
        shouldShowAlert: true,
        shouldPlaySound: true,
        shouldSetBadge: true,
    }),
});

export default function App() {

    function scheduleNotification() {
        Notifications.scheduleNotificationAsync({
            content: {
                title: 'Look at that notification',
                body: "I'm so proud of myself!",
            },
            trigger: {
                seconds: 3
            }
        });
    }

    return (
        <View style={styles.appContainer}>
            <Button title={'Schedule notification'} onPress={scheduleNotification} />
        </View>
    );
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});

This is how I set up the plugin in app.js

"plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/icon.png",
          "color": "#ffffff",
          "defaultChannel": "default",
          "enableBackgroundRemoteNotifications": false
        }
      ]
    ]

And this is the content of my package.json

{
  "name": "react-native-test-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.19",
    "expo-linear-gradient": "^14.0.1",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-svg": "^15.10.1",
    "expo-notifications": "~0.29.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I am testing on Android Studio emulator. When I press the button no notification is shown at all. Maybe the setNotificationHandler is not on the right place ?

• react-native
• expo
• notifications

1 Answer 1

I needed to add permissions:

PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS);

now it works