Implement Mobile Push Notifications in React Native

Configure your mobile app

Good, your credentials are set! However, you still need to configure your app.

If you are developing your app with Expo or any other React Native library we recommend using this React Native library. Here you have a short example:

React-Native
import PushNotification from 'react-native-push-notification';
import React, { Component } from 'react';
import { Alert, View, Text } from 'react-native';

export default class App extends Component {
  constructor() {
    PushNotification.createChannel({
      channelId: 'default-channel-id',
      channelName: 'Default channel',
      soundName: 'default',
      vibrate: true,
    });
  }

  render() {
    return (
      
        welcome to MagicBell
      
    );
  }
}

PushNotification.configure({
  onNotification: (notification) => {
    Alert.alert(notification.title, notification.message);
  },
  requestPermissions: true,
});

If you face any issues while configuring the library, please feel free to shoot us a note, we will be happy to help. You might also find it helpful to read through the Mobile Inbox React Native example we created.

This is a sample payload MagicBell will push to your app:

json
{
  "notification": {
    "id": "7fb3ce9f-a866-4dff-8ce8-2f64f7c5ed4c",
    "title": "Pickup Instructions – In-Store",
    "action_url": "https://magicbell.com/pricing",
    "content": "
Bring your valid government-issued photo ID.
",
    "category": "order_ready",
    "custom_attributes": {
      "order_number": "W846MD",
      "part_number": "MRJL74/C"
    }
  }
}

If you set overrides for the mobile_push channel, those values will be pushed to your app.

Forward device tokens to MagicBell

Both Android and iOS will generate a registration token when someone installs your app on their device. Please retrieve it and forward it to MagicBell.

React-Native
import { Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  onRegister: (token) => {
    fetch('https://api.magicbell.com/push_subscriptions', {
      method: 'POST',
      headers: {
        'X-MAGICBELL-API-KEY': MAGICBELL_API_KEY,
        'X-MAGICBELL-USER-EXTERNAL-ID': CURRENT_USER_ID,
      },
      body: JSON.stringify({
        push_subscription: {
          device_token: token,
          platform: Platform.OS,
        },
      }),
    });
  },
  requestPermissions: true,
});

Keep in mind that a new device token will be generated when the user reinstalls the app or clears the app data. Therefore, you will have to forward the new token to MagicBell each time a new one is generated.

Now MagicBell will deliver mobile push notifications when you create notifications through the create notifications API endpoint!