Show Notifications in Foreground on Expo iOS Application!!
Tags: javascript, expo, notifications, tutorial
Published: 2020-02-21 18:33:10

*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:

```js
  
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](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](https://snack.expo.io/@documentation/pushnotifications?platform=ios)*

`LocalNotification.ios._displayInForeground`  *found here: [https://docs.expo.io/versions/v36.0.0/sdk/notifications/#localnotification](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](https://www.youtube.com/c/michaellustig?sub_confirmation=1 )   |   [dev.to](https://dev.to/technoplato)   |   [Twitter](https://twitter.com/technoplato/)   |   [Github](https://github.com/technoplato)    |   [Reddit](https://www.reddit.com/user/halfjew22)