Now for that, I got a brand new project here.
Again, created with Expo init,
using the managed Expo workflow.
At the end of the module,
I will also link to resources
that help you get started with push notifications
in non Expo apps.
But I will say that it's way easier with Expo.
So I absolutely recommend using that.
And that's why I'm showing it here
because it is super easy to send notifications with Expo,
as you will see.
So here's this brand new unchanged app
running on Android and iOS.
And to start with local notifications,
we first of all need to install a new package.
With expo install,
we should install the expo-notifications package.
Simply hit enter,
and this will download and install this into your project.
Now, once that is done,
we're ready to write some code.
Now, here, as I said, I want to keep this very, very simple.
So I will simply display a button in this application here.
The built in react native button will do,
set a title of trigger notification.
And when we click the button,
I want to do what the title implies.
I want to trigger a local notification.
Now, this button is automatically centered by default,
which is quite nice.
That's exactly what I want.
And now here I can register a new function.
The trigger notification handler function here,
which is a default arrow function,
which we bind to on press on this button, like this.
And in here, we now, well guess what?
Want to trigger a local notification.
For that we need to import from expo-notifications,
and actually we want to import everything as notifications,
for example,
from expo-notifications,
of course you can name this however you want.
Now with this import here
in this trigger notification handler function,
we can use this imported notifications object
and there we will have a bunch of methods.
And one method is the schedule notification async method.
This is the method that will help us, well,
schedule a notification.
And with that, we always schedule a local notification.
Again, later I will show you
how you send a push notification.
With this method, you always create a local notification.
Now, this method wants an object
where you configure the notification that should be sent.
And as you can see, we've got three basic options
we can set here.
The content of the notification, I'll come back to that,
the trigger, which will simply define
when the notification should be displayed,
and an identifier,
which we could use to cancel this notification
in case we, well,
don't want to display it after it was scheduled.
We don't necessarily need the identifier here.
And therefore I'll start with the content.
The content itself is an object
where you get various options.
Now, not all options are supported on both platforms,
but you can set them all
and if a platform doesn't support it,
it will simply ignore it.
What you can set on all platforms is the title
where I will write my first local notification
and the body of the notification,
this is the first local notification we are sending.
So simply two strings.
Now, as you see, you could set more,
you could set a color, for example,
you could add extra metadata, which you later can retrieve
when the notification fired,
you can give it a priority
which might lead to the operating system
to display it with higher priority,
you can add a sound,
but I will keep it fairly basic here
and just send this basic notification.
You can of course,
play around with the other options as well
and send a more complex push notification.
Now that's the content.
We also need the trigger.
The trigger is also an object
where you simply define when
the notification should be sent.
And there you've got a couple of nice properties
that you can set.
For example, you can set the seconds
until the notification should be displayed.
And I'll set this to 10 seconds here.
Well, and that's scheduled notification.
Let's see whether it works.
For that, I save this,
and after killing the app here
and completely restarting it on Android,
I will press the button there
once the app finished loading.
And now with the app loaded,
I will press this trigger notification button.
Now what we'll notice is that after 10 seconds,
nothing happens.
We don't have any new notification here.
This has nothing to do with the notification we scheduled
and we saw nothing else.
Well, there are a couple of reasons.
For Android we need to do one extra thing
in the app.json file.
There, we need to add the Android entry.
And on Android, you want to set
the use next notifications API to true.
Save that,
and then it might be best if you simply restart
your Expo server with Expo start
so that this new configuration is taken into account.
And there after, to be super safe,
I will simply kill those apps here,
starting with Android, and I'll simply rerun it.
But that will not be the only thing we have to do.
And now that this restarted, let's click the button again.
But as I said,
this will not be the only thing we need to change.
And therefore still, you will see nothing.
If I expand this, I see no notification here.
Well, there is a reason for that.
If your app is in the foreground,
so if it's currently running as it is here,
local notifications by default are not shown.
Now therefore, if I click this again
and now I go to my home screen
so that the app is no longer in the foreground
and it's no longer running,
but instead it's in the background,
you now see this my first local notification pop up here.
Now, if you click it, we're taken back to our application.
Now we're not doing anything in the application
upon this notification yet,
but at least we saw
that we were able to create a local notification.
Now what about iOS?
Let me start the app there again as well.
And let's try the same thing here.
If I click on trigger notification
and I go to the home screen,
let's see whether we get a notification
after 10 seconds there.
I can tell you that we don't need
to set anything up in the app.json file for iOS,
but still I don't see any notification here.
We definitely have no new notification here.
Well, there is an important difference
between Android and iOS here.
On Android, it works just like that out of the box,
on iOS, you need to grant explicit permissions
to receive notifications.
So, let's do that next.