Custom UI in notifications 

To add custom UI to our notifications, we need to add an extension. Let's get started by doing the following:

  1. In the Navigator panel, select the Project navigator and, then, your project.
  2. At the bottom of the TARGETS area, click the + button.
  3. Select Notification Content Extension under Application Extension and, then, click Next:
  1. In the options screen that appears, set Product Name to LetsEatContentExtension and click Finish:
  1. Next, select Activate on the screen that appears:

This activation allows us to build and run our custom UI extension in the simulator. Now, you have a choice of running our app, the iMessages app, our kit or our custom UI extension.

Now that our extension is created, we need to be able to use it.

  1. Open the info.plist file in our LetsEatContentExtension folder.
  2. Tap the NSExtension disclosure arrow to open up that key.
  3. Then, tap the disclosure arrow to open NSExtensionAttributes, under which you can see UNNotificationExtensionCategory:

This category is the name of the category of our notification we set earlier.

  1. Update myNotificationCategory to reservationCategory.

Save the file and switch your target back to the Let's Eat app. Build and run the project by hitting the Play button (or using ⌘ + R). This time, instead of seeing our custom image, we now have the following:

You might have noticed something slightly off when you pulled down on the notification. The notification starts out large and then shrinks down. Inside of your Info.plist file, there is a property, UNNotificationExtensionInitialContentSizeRatio, that is currently set to 1. Changing it to 0.25 makes this less obvious.

Currently, this custom notification is showing us the custom and default content together. We can fix this by returning to our Info.plist inside of the LetsEatContentExtension:

Inside of NSExtensionAttributes, add a new item called UNNotificationExtensionDefaultContentHidden and set the type as Boolean and the value to YES:

Save the file and build and run the project by hitting the Play button (or using ⌘ + R). Once you pull down on the notification, you see that the default content is hidden:

You can now update the MainInterface.storyboard inside of your LetsEatContentExtension folder. In this book, we are not going to do this as we have done plenty of storyboarding, and this gives you an opportunity to practice what you have learned in this book to create a custom interface for this.