One post tagged with "expo"

Adding notifications to your mobile app with Expo is quite straightforward. Customizing these notifications with unique sounds is a great way to enhance the user experience. However, with Expo, especially on Android devices, some additional settings are necessary.

In this article, we’ll go over the step-by-step process for adding custom sounds to notifications in your Expo project.

Note: This guide assumes you have configured the expo-notifications package and the necessary permissions. Remember that custom notification sounds are only supported when using EAS Build. (See: "Custom notification sounds are only supported when using EAS Build.")

1. Adding Sound Files and Configuring app.config​

First, add your sound file according to your project’s file structure. For example, you might place it at src/assets/sounds/bip.mp3. Then, specify this file path in your app.config file:

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  assetBundlePatterns: ["./src/assets/sounds/*"], 
  plugins: [    [      "expo-notifications",
      {
        sounds: ["./src/assets/sounds/bip.mp3"],
      },
    ],
  ],
});

2. Configuring Notifications​

Configuring notifications correctly is crucial. For Android, you need to create a new notification channel to send notifications with a custom sound. Notifications sent through this channel will play the specified sound. For iOS, you don’t need a separate channel; simply specify the sound file directly in the notification content.

Define the notification settings as follows:

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

Then, set up the configuration in App.js within a useEffect:

if (Platform.OS === "android") {
  await Notifications.setNotificationChannelAsync("bip", {
    name: "BipChannel",
    importance: Notifications.AndroidImportance.MAX,
    vibrationPattern: [0, 250, 250, 250],
    sound: "bip.mp3",
  });
}

3. Sending a Notification​

Now that the configuration is ready, you can send notifications with a custom sound. Use the following function to send a test notification:

const handleTestNotification = async () => {
  if (Platform.OS === "android") {
    await Notifications.scheduleNotificationAsync({
      content: {
        title: "Test Notification",
        sound: true,
      },
      trigger: {
        seconds: 1,
        channelId: "bip",
      },
    });
  } else {
    await Notifications.scheduleNotificationAsync({
      content: {
        title: "Test Notification",
        sound: "bip.mp3",
      },
      trigger: {
        seconds: 1,
      },
    });
  }
};

Note: Remember to set sound: true and channelId: "bip" for Android, and sound: "bip.mp3" for iOS.

Using custom notification sounds in Expo is a powerful way to personalize the user experience of your mobile app. Although there are slight differences between Android and iOS, following these steps allows you to quickly add custom sounds to your project. This will give your app a unique touch and provide a more memorable experience for your users.

Try sending a test notification to see how custom notification sounds work in your projects!

Happy coding!

Resources

Expo Notifications Documentation