Show Notifications in Foreground on Expo iOS Application!!

I'm not sure exactly when this was added to Expo, but as of Expo version 36 is easily doable.

To show Expo Push Notifications on iOS when your app is in the foreground, please do the following:

import { Vibration } from "react-native";  
import { Notifications } from "expo";  
import * as Permissions from "expo-permissions";  
import Constants from "expo-constants";

registerForPushNotificationsAsync = async () => {                          
  if (Constants.isDevice) {                                                
    const { status: existingStatus } = await Permissions.getAsync(         
      Permissions.NOTIFICATIONS                                            
    );                                                                     
    let finalStatus = existingStatus;                                      
    if (existingStatus !== "granted") {                                    
      const { status } = await Permissions.askAsync(                       
        Permissions.NOTIFICATIONS                                          
      );                                                                   
      finalStatus = status;                                                
    }                                                                      
    if (finalStatus !== "granted") {                                       
      alert("Failed to get push token for push notification!");            
      return;                                                              
    }                                                                      
    let token = await Notifications.getExpoPushTokenAsync();
    console.log("Go to https://expo.io/notifications and copy the token below to easily send yourself a notification.");
    console.warn("Notifications on iOS (and I believe Android) ONLY WORK ON A PHYSICAL DEVICE, not a simulator or emulator!!!")               
    console.log(token);                                                    
    this.setState({ expoPushToken: token });                               
  } else {                                                                 
    alert("Must use physical device for Push Notifications");              
  }                                                                        
};                                                                         

componentDidMount() {                                                      
  this.registerForPushNotificationsAsync();                                                
  this._notificationSubscription = Notifications.addListener(              
    this._handleNotification                                               
  );                                                                       
}

_handleNotification = async notification => {                                                                                    
  if (notification.remote) {
    Vibration.vibrate();                                                  
    const notificationId = Notifications.presentLocalNotificationAsync({      
      title: "Follow @technoplato",  
      body: "To learn yourself goodly (also follow PewDiePie)",                                             
      ios: { _displayInForeground: true } // <-- HERE'S WHERE THE MAGIC HAPPENS                                
    });                                                                       
  }                                                   
};                                                                                                                                                      

Quick and Easy Sanity Check
1) Go here: https://expo.io/notifications
2) Copy the token that is output to the terminal when your application is run.
3) Open your application on iOS.
4) Send a notification to yourself from https://expo.io/notifications and observe that it shows up even when your app is foregrounded.

---

Notes

• Notifications WILL NOT BE RECEIVED ON AN IOS SIMULATOR
• Expo makes Notifications ridiculously easy. I honestly can't believe it.

No idea why displayInForeground is false by default and not more prominent in the documentation. I'll submit a PR for it if I can.

Code originally found at this Snack: https://snack.expo.io/@documentation/pushnotifications?platform=ios

LocalNotification.ios._displayInForeground found here: https://docs.expo.io/versions/v36.0.0/sdk/notifications/#localnotification

</ Post >

🤟🙏 THANKS FOR READING 🤟🙏

If you liked the post, please be sure to give it a thumbs up, a heart, an upvote, a retweet, or whatever it is that the cool kids do these days. All my follow links are below if you're intersted in quick tutorials and explanations like this one.

🤔 QUESTIONS | 📝 COMMENTS | 📉 CONCERNS | 📩 SUGGESTIONS

Let me know if you have any questions in the comments or if I could have done a better job explaining anything anywhere.

Most importantly,
💻📲👨🏻‍💻KEEP CODING, KEEP LEARNING, AND KEEP DOING!

👇👇👇 FOLLOW ME 👇👇👇

YouTube | dev.to | Twitter | Github | Reddit

Comments

[flprben]

Nice tip Michael! I just wanted to add something that was not immediately obvious for me.

To handle the click on that local notification, the code is already set up, since the Notifications.addListener(callback) will be fired when you tap that local notification. The only difference is it will have a remote: false property.

So, what we're doing in our app, is we pass a data params to that local notification to know what we should do:

_handleNotification = async notification => {                                                                                    
  if (notification.remote) {
    Vibration.vibrate();                                                  
    const notificationId = Notifications.presentLocalNotificationAsync({      
      title: "Follow @technoplato",  
      body: "To learn yourself goodly (also follow PewDiePie)",                                             
      ios: { _displayInForeground: true } 
      data: {arbitraryDataFromTheOriginalNotification: notification.arbitraryDataFromTheOriginalNotification}                               
    });                                                                       
  } else {
     // Here you handle the local notification tapped, and you can access notification.data.arbitraryDataFromTheOriginalNotification
  }
};              

That way, when that notification is tapped, the