Video details

React Native EU 2021: Helena Ford - Local Notifications in React Native

React Native

This talk was presented during the React Native EU 2021 - the largest community conference in the world focused exclusively on React Native.
Abstract: Most apps on your phone send user notifications; they are straightforward to integrate and apply to the most basic of use cases. However, most of these apps aren’t exploiting their full power to increase user engagement and retention.
There are two types of notifications used to inform users, local and remote (aka push). For example, a messaging app might let the user know when a new message has arrived, or a calendar app might inform the user of a scheduled appointment.
In this talk, we’ll walk through how to integrate local notifications in a React Native app and demonstrate how they can be elevated beyond the basic title and body, to enhance the overall user experience.
- Getting set up with Notifee - Media support - Quick Actions - Scheduling using Trigger Notifications
Bio: Helena is the CTO of StackTiger and has been building and shipping React Native apps since it was first released.
She is a maintainer of Notifee, a library for creating local notifications, and is somewhat of a Firebase Messaging expert. When she’s not killing her Macbook processor, she likes to read, binge YouTube, and cook up new plant-based recipes.


This conference is brought to you by Cold Stack, React and React Native development Experts hey, everyone, I'm Helena Ford, and I'm the CTO of Stack Tiger, a mobile data agency in the UK. I've been working with React Native since the beginning and I'm an active maintainer, notably a local notification library. By invites. You can find me at Helena Ali Ford on Twitter and I have a blog Ford Dev today. I'm going to give a quick demo and talk about how you can exploit the full power notifications to increase user engagement and retention. We will cover get and start set up with notify media support, quick actions, scheduling, user notifications, and a few other bits. Post notifications often require third party services like Firebase to operate. However, local notifications are completed on the device itself allow you to get them up and running without any such third parties. A good example is your alarm clock that sends a local application at whatever time you set your alarm for. There are several React native libraries editor that can help you configure these notifications. One of these which I'm going to talk about today is Note Fee by invites. Note fee enables developers to build rich creations with a simple API whilst thinking of complex problems such as scheduling, background tasks, device API compatibility and more. Okay, so let's get into the code then. So you see on the screen an example project I prepared for this demo, which is some TV shows just plain simple JSON data with a display notification button. And if we look here, it's just playing button on press. So what we want to do here is display a notification local notification. So before we even do that, we should also say you would need to install the library first. Of course I already installed it for this example, but if you can see my terminal here, you can do yellowbushup and then if you see the into iOS install, that's all you need to do to set up. And I'm going to just get right in the scope. So it's fairly straightforward. Everything tells you. Okay, what does it expect to take? We'll just start off with simple Python body Hello World and Android requires one extra step, which is to make it. I normally just tend to go general default anything really you like, but just be keep in mind that the user will see the name. So when you create the channel the same idea, you pass it to the payload. So this is what the user see. Just keep it sitting user friendly and then importance. Okay, so this is probably one of the things that trips people up the most, which makes myself up too is if you want it to be a banner, like a heads up to go over the apps and not just like hidden in the notification tree when it comes through is to do importance of high. Also, you can call create cameras many times you want. It's not really an issue because Android would just ignore it if it's really created. But also remember once you've reached home, you can't then update any of these properties. You have to delete it first. So if we go ahead and try to display this fingers cross it'll come up. Hello world. We haven't specified a notification yet, but we can easily do that. Small icon. You have to add this to your project separately, which is detailed on the docs page. I've added this earlier and it's just the TV icon. You can give it any name that's just the default name that address Studio uses. So if we try to say this again, you'll see that it has a TV notification icon. So that's basically part one. And next we'll go into making this bit more complicated. So this is probably like what most apps can do. Tile body is pretty standard. Okay, so as you can see, I've specified a large icon. This is literally just a random URL. It's a PNG on Android. You can add a JPEG and it can be local or remote. So this is a remote URL you can also add like require here. I tried to do an example of a local and a remote one. So here's a local asset file. So if I look into here, you can see I've added some added image and then some actions. This is probably getting ahead of itself, but we're just doing it once at a time. So if I slowly start to build this up. So if I do large icon, then this URL, I'm not going to type that out. Okay, so you can see the large ICS on the right hand side, which is perfect. So we want to swipe that way and then we go down into adding the big picture on Android. This is finger style, so you can have different styles messaging big picture inbox. Again, I don't really want to go into specifics of API because it's all online docs, but it's just to give a feeling of what you can do what is possible because I've taken it out of this phone playing it's not recognizing. So if I swipe down now on the notification, you should see the picture. So this is the large icon. And then this is styles. And with Starbucks creature, which is used just like a local asset. And if we now look at iOS, so on iOS they don't have channels, but they do require to request permissions. So for the city government, I'll just add it here. You can specify exactly what you want, but default is fine. It will give you the positions you need to display that comes over that here we want to show a video. You can add images too. This is the cool thing about iOS is that you can have videos. I put an example of how you can do the images pretty much identical to Android. Just the field is under attachments on iOS, you can add an array. If you have loads of images and videos specified here, it will let you just go down the list in order until one can successfully load. Okay, so let's just pull over the IRS emulator and see what this video displays like. Okay, so this is the require extra step. There's different ways you can call this and where you can call it throughout your lifecycle to be less intrusive to the user, but I just call it straight away and save the notification. Okay, so the first time it loads, it might take some time to load if you got big files. I've obviously not optimized this video or anything. You could also make a gift, which probably speed it up just quickly take all this out and actually see what it would look like with all the right text and everything. So new episode goes to me. Excellent name. Great. This isn't actually very useful to the end user, so now we can actually start going into what quick actions are. So quick actions is a cool way for your user to engage with your app without them actually having to be in your app, which is great if they're doing something else and they see a notification pop up, they can quickly interact and it doesn't really affect what they're doing. So for Android, we'd have to go into the API little bit. It accepts an array of actions, a Press action which is object and a title. So titles pasted that button label. So we got watch now and save it later and then ID. So ID default notary will know just what you want when someone presses on that you want the app to open and I do bookmark. This is completely whatever you want. In our case, we want the user to be able to bookmark from a notification. So before we actually display this and show you the buttons won't do anything much until we add the rent hand list to know. Okay, user has actually pressed these buttons. The first thing we need to do is add a background one you just import not to feed and this will give you an event of type and details, so we can quickly just put that back to see what we get back from the event handler, and this function is called background. This will only run when the app is in background. There's also an on foreground event handler which will add in a separate place. So with the barcode you'd always want it to be really here before your app is loaded, so it's always there and then the foreground one. You can pretty much have it wherever you want. I always try to put it in my when I put it in my apps. I always try to put it when the app first vendors as early as possible. Really as a while. But again, that one really any way you want. Okay, so as we have two options with these IDs, this is what we want to hook into. So we can do if types that will open up, but also we'll have to cancel the notification. So we'll just do not see cancel notification and give the ID of the notification. So that's just demonstrate. We can demonstrate here what watch now how we would use watch now. So we trigger this. If this was a real world out there in the world, this will be triggered when the actual episode is about to air or it has been released. So if we put that in the background and then hopefully our background hunger will pick up this event. I want to cancel it one that app opens and if you look down in my terminal, you will see that you can see all these events coming through. If I do this to make it more easier to detect the two is price action. You can see it's coming through from the background. Next we'll add a four grinder handler so this can go like I said can go anyway. I always do it this way on the use of fact, when my app is rendered or loaded and it's exactly the same as the background one, then we have a type and detail. We always want to make sure we return that. So it's unscribed after the apples. And then in here we want to do the same as what we did in the background one to import event type. This needs to be bookmarker. So I use bookmark this episode or TV show. So what we want to do here is actually set a big state of BOOKMARKS so you can see that they bookmark this. All we need to do is Mark and then the ID which we would get from data. You could set your notification ID to match the show ID, but you could also do data, because if you wanted to say have two notifications upgraded and ask me if you just use show ID that would restrict you. So we just get it from the data. The notification also, just to explain this, every property in data needs to be string. This can be anything. This is if we try that we should see Grey's nasty. Awesome. So that's Android. Next we have iOS. If I just bring that in quickly. So on iOS it works a little bit different but also very similar to Android. It takes in the category ID. So rather than specifying the quick actions inside the notification payload, you have to create this category beforehand and it can only be like a one time thing. So you have to create the categories all at once together. I tend to do this again in the user fact, just when the office maps, you could also do it when we get display notification, it really doesn't matter that much. So if I just function only, but on Android with not ignore this, so you don't have to worry about wrapping it in a condition. Check the platform category. So it's basically the same as this without the press option object, you just need an ID. So ID default and title. So if you go into Actions new episode is the one that we bought. Basically we want it to be the same watch now. Same on Android and iOS. We could also do it differently. And then the next option for this category is the one probably. And then our four point event will recap our Facebook message. Okay, let's give this Wiz we drop down, see the actions click, save later and things else. It's updated to be. So this is actually important documented on our thing. So if you do trip up, just go to the docs, you'll see that or ask for help on the GitHub GitHub reposposit. Easiest way to get in touch with us to maintain the fee is just quickly do a Git issue or look through, see if anyone else has an issue. Turns out probably the house, but yeah, more than happy to answer any questions on there. Try that again. Display notification, put it up in the background, move a notification watch. Now don't forget to do the full brand trip. Now we'll go on to scheduling. So now we've seen precautions for Android iOS and how they can help the user engagement up more. We go into scheduling. So next we move on to scheduling. So this is really useful for calendar apps, alarm notifications, anything really that you want to plan ahead, alert the user ahead of time. These are normally great and you normally ask to use it beforehand if they want these notifications. So like, for example, in our scans app it's on TV shows. So if I just get right into it, if you click on Greeting, Atomy or Ozark, just the payload already designed for this, you can ask. Okay, would you like a reminder when this show is back to air ten minutes before one day before? Do you want it to be repeat repeated every Monday at 08:00 p.m.. But for this time I would just say time as before Ozark is it? Please let me know set reminder at the moment. This button doesn't do anything. So let's go ahead and give it something to do. So we'll import not to feed it takes in a notification. So what the notification? We want to look like our payload and the trigger. So when do we want this to be scheduled into the future? So I already have this set up and my notifications appear. Also, this will be available online. So let me go back to it. This is the same as the notification I should above with the new episode, but instead it's just a different show, different image and slightly different quick actions. Really? What default Smith's default and a different category on is which will have the same actions but the other thing is I do have this here which is slightly jumping ahead of the demo. So we were triggered type. There are multiple trigger types, so this one which can do timestamp install is more if you want to allow them and you want to notify these every five minutes after they press snooze or you want to count down like okay, trigger in 60 seconds. That's what info is. Grateful. Time is more great for an actual date. In time for the demo, we will just go ahead and say we want trigger in 3 seconds Monday at 08:00 p.m. Which might be in 5 seconds one time. You're watching this right now, but it's not. So I'm just going to go ahead 3 seconds into the future. Go ahead and just add that date then as the timestamp also need the import date, which is the payload to the right. And we should be good to go. I think that's literally all you need. We're doing Android first, so don't need to create the category at normally, that's all we're going to be doing. So we're just going to be dismissing it or default for the dismiss. This is just like, okay, I appreciate the reminder, but I don't want to look in the app right now. I'm just going to get ready for my TV shows. Actually, when they click dismiss, we can actually cancel that. So if we update our vent handler out of the notification trade, otherwise they can back it out ahead of time. So this is going to be ten minute reminder ahead of the episode so they could browse up, get the up ready. They are easier to watch the show. He hit reminder and close. The modal should get an option to begin in ten minutes. Are you ready? Grab the popcorn. Okay, great. And there's an option dismiss or see more if we for several reasons, put this in the background. You see that on the thing. It's not clear. I'm not sure how I know it's because I put it up in the background. But this is what I'm saying about this is the on foreground event. I can quickly just put this logic into the background event. You could also just okay, is it default or dismiss? Basically any ID that you want to cancel every time you update the background handler, you have to make sure your app updates. We'll do that now. We put the app in the background and just hit dismiss. Yeah, it cancels. Okay, great. So that concludes us a quick brief look at scheduling, but it really opens up a lot of stuff you can do with our database, like remote notifications just within the device itself. So that's pretty cool. I have nothing you can do. I think the features that I think are most useful. I'm probably going to be useful the most amount different types of apps of images, videos, scheduling. There's also those stuff you can do like timers. The code for this demo is live on GitHub. So go ahead and try it out. If anyone has any questions, feel free to reach out to me. Notify is free for development and for production and licenses required on Android. But Inverted has been kind enough to offer 103 licenses using code rneu. I'll have an afford. Thank you so much. Hope you enjoyed the brief intro to local Notifications in.