Cómo funciona el Push Notification en Expo React Native – Parte 1 🚀📲💬

Introduction

This tutorial will guide you through the process of setting up push notifications in an Expo React Native app. You will learn how to obtain a push notification token, configure your app, and send messages using the Expo API. This guide is designed for beginners looking to integrate push notifications into their applications.

Step 1: Install Required Packages

To get started, you need to install the necessary Expo packages for handling notifications.

1. Open your terminal.
2. Navigate to your project directory.
3. Run the following command to install the required packages:

   npx expo install expo-notifications expo-device expo-constants
   

Step 2: Configure Notification Permissions

Before sending notifications, you must request permission from the user.

1. Import the necessary modules in your main application file:

   import * as Notifications from 'expo-notifications';
   import * as Permissions from 'expo-permissions';
   

2. Create a function to request permissions:

   async function requestNotificationPermissions() {
       const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
       return status === 'granted';
   }
   

3. Call this function when your app loads to ensure permissions are granted.

Step 3: Get the Push Notification Token

After obtaining permissions, you need to retrieve the push notification token.

1. Create a function to get the token:

   async function getPushNotificationToken() {
       const token = await Notifications.getExpoPushTokenAsync();
       console.log(token); // Save this token to send notifications later
   }
   

2. Call this function once permissions are granted to log the token.

Step 4: Set Up Notification Handling

To handle incoming notifications, you need to set up a listener.

1. Create a notification handler function:

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

2. Add the listener in your main application file:

   Notifications.addNotificationReceivedListener(notification => {
       console.log(notification);
   });
   

Step 5: Send Notifications Using Expo API

Now that you have the token and set up notification handling, you can send notifications using the Expo API.

1. Create a function to send a push notification:

   async function sendPushNotification(token) {
       const message = {
           to: token,
           sound: 'default',
           title: 'Hello!',
           body: 'This is a push notification.',
           data: { someData: 'goes here' },
       };
   
       await fetch('https://exp.host/--/api/v2/push/send', {
           method: 'POST',
           headers: {
               Accept: 'application/json',
               'Content-Type': 'application/json',
           },
           body: JSON.stringify(message),
       });
   }
   

2. Call this function with the user's token whenever you want to send a notification.

Conclusion

In this tutorial, you learned how to set up push notifications in an Expo React Native app. You went through installing necessary packages, requesting permissions, obtaining the push notification token, setting up notification handling, and sending notifications using the Expo API.

Next steps could include customizing notifications further, handling background notifications, or exploring additional features of the Expo Notifications API. Happy coding!