-: Now for that, I got a brand new project here. 2 2
Again, created with Expo init, 3 3
using the managed Expo workflow. 4 4
At the end of the module, 5 5
I will also link to resources 6 6
that help you get started with push notifications 7 7
in non Expo apps. 8 8
But I will say that it's way easier with Expo. 9 9
So I absolutely recommend using that. 10 10
And that's why I'm showing it here 11 11
because it is super easy to send notifications with Expo, 12 12
as you will see. 13 13
So here's this brand new unchanged app 14 14
running on Android and iOS. 15 15
And to start with local notifications, 16 16
we first of all need to install a new package. 17 17
With expo install, 18 18
we should install the expo-notifications package. 19 19
Simply hit enter, 20 20
and this will download and install this into your project. 21 21
Now, once that is done, 22 22
we're ready to write some code. 23 23
Now, here, as I said, I want to keep this very, very simple. 24 24
So I will simply display a button in this application here. 25 25
The built in react native button will do, 26 26
set a title of trigger notification. 27 27
And when we click the button, 28 28
I want to do what the title implies. 29 29
I want to trigger a local notification. 30 30
Now, this button is automatically centered by default, 31 31
which is quite nice. 32 32
That's exactly what I want. 33 33
And now here I can register a new function. 34 34
The trigger notification handler function here, 35 35
which is a default arrow function, 36 36
which we bind to on press on this button, like this. 37 37
And in here, we now, well guess what? 38 38
Want to trigger a local notification. 39 39
For that we need to import from expo-notifications, 40 40
and actually we want to import everything as notifications, 41 41
for example, 42 42
from expo-notifications, 43 43
of course you can name this however you want. 44 44
Now with this import here 45 45
in this trigger notification handler function, 46 46
we can use this imported notifications object 47 47
and there we will have a bunch of methods. 48 48
And one method is the schedule notification async method. 49 49
This is the method that will help us, well, 50 50
schedule a notification. 51 51
And with that, we always schedule a local notification. 52 52
Again, later I will show you 53 53
how you send a push notification. 54 54
With this method, you always create a local notification. 55 55
Now, this method wants an object 56 56
where you configure the notification that should be sent. 57 57
And as you can see, we've got three basic options 58 58
we can set here. 59 59
The content of the notification, I'll come back to that, 60 60
the trigger, which will simply define 61 61
when the notification should be displayed, 62 62
and an identifier, 63 63
which we could use to cancel this notification 64 64
in case we, well, 65 65
don't want to display it after it was scheduled. 66 66
We don't necessarily need the identifier here. 67 67
And therefore I'll start with the content. 68 68
The content itself is an object 69 69
where you get various options. 70 70
Now, not all options are supported on both platforms, 71 71
but you can set them all 72 72
and if a platform doesn't support it, 73 73
it will simply ignore it. 74 74
What you can set on all platforms is the title 75 75
where I will write my first local notification 76 76
and the body of the notification, 77 77
this is the first local notification we are sending. 78 78
So simply two strings. 79 79
Now, as you see, you could set more, 80 80
you could set a color, for example, 81 81
you could add extra metadata, which you later can retrieve 82 82
when the notification fired, 83 83
you can give it a priority 84 84
which might lead to the operating system 85 85
to display it with higher priority, 86 86
you can add a sound, 87 87
but I will keep it fairly basic here 88 88
and just send this basic notification. 89 89
You can of course, 90 90
play around with the other options as well 91 91
and send a more complex push notification. 92 92
Now that's the content. 93 93
We also need the trigger. 94 94
The trigger is also an object 95 95
where you simply define when 96 96
the notification should be sent. 97 97
And there you've got a couple of nice properties 98 98
that you can set. 99 99
For example, you can set the seconds 100 100
until the notification should be displayed. 101 101
And I'll set this to 10 seconds here. 102 102
Well, and that's scheduled notification. 103 103
Let's see whether it works. 104 104
For that, I save this, 105 105
and after killing the app here 106 106
and completely restarting it on Android, 107 107
I will press the button there 108 108
once the app finished loading. 109 109
And now with the app loaded, 110 110
I will press this trigger notification button. 111 111
Now what we'll notice is that after 10 seconds, 112 112
nothing happens. 113 113
We don't have any new notification here. 114 114
This has nothing to do with the notification we scheduled 115 115
and we saw nothing else. 116 116
Well, there are a couple of reasons. 117 117
For Android we need to do one extra thing 118 118
in the app.json file. 119 119
There, we need to add the Android entry. 120 120
And on Android, you want to set 121 121
the use next notifications API to true. 122 122
Save that, 123 123
and then it might be best if you simply restart 124 124
your Expo server with Expo start 125 125
so that this new configuration is taken into account. 126 126
And there after, to be super safe, 127 127
I will simply kill those apps here, 128 128
starting with Android, and I'll simply rerun it. 129 129
But that will not be the only thing we have to do. 130 130
And now that this restarted, let's click the button again. 131 131
But as I said, 132 132
this will not be the only thing we need to change. 133 133
And therefore still, you will see nothing. 134 134
If I expand this, I see no notification here. 135 135
Well, there is a reason for that. 136 136
If your app is in the foreground, 137 137
so if it's currently running as it is here, 138 138
local notifications by default are not shown. 139 139
Now therefore, if I click this again 140 140
and now I go to my home screen 141 141
so that the app is no longer in the foreground 142 142
and it's no longer running, 143 143
but instead it's in the background, 144 144
you now see this my first local notification pop up here. 145 145
Now, if you click it, we're taken back to our application. 146 146
Now we're not doing anything in the application 147 147
upon this notification yet, 148 148
but at least we saw 149 149
that we were able to create a local notification. 150 150
Now what about iOS? 151 151
Let me start the app there again as well. 152 152
And let's try the same thing here. 153 153
If I click on trigger notification 154 154
and I go to the home screen, 155 155
let's see whether we get a notification 156 156
after 10 seconds there. 157 157
I can tell you that we don't need 158 158
to set anything up in the app.json file for iOS, 159 159
but still I don't see any notification here. 160 160
We definitely have no new notification here. 161 161
Well, there is an important difference 162 162
between Android and iOS here. 163 163
On Android, it works just like that out of the box, 164 164
on iOS, you need to grant explicit permissions 165 165
to receive notifications. 166 166
So, let's do that next.