1
00:00:02,220 --> 00:00:04,540
Now for that, I got a brand new project here.

2
00:00:04,540 --> 00:00:06,770
Again, created with Expo init,

3
00:00:06,770 --> 00:00:09,500
using the managed Expo workflow.

4
00:00:09,500 --> 00:00:11,180
At the end of the module,

5
00:00:11,180 --> 00:00:13,101
I will also link to resources

6
00:00:13,101 --> 00:00:16,470
that help you get started with push notifications

7
00:00:16,470 --> 00:00:18,410
in non Expo apps.

8
00:00:18,410 --> 00:00:22,260
But I will say that it's way easier with Expo.

9
00:00:22,260 --> 00:00:24,810
So I absolutely recommend using that.

10
00:00:24,810 --> 00:00:26,370
And that's why I'm showing it here

11
00:00:26,370 --> 00:00:30,850
because it is super easy to send notifications with Expo,

12
00:00:30,850 --> 00:00:31,763
as you will see.

13
00:00:32,608 --> 00:00:36,270
So here's this brand new unchanged app

14
00:00:36,270 --> 00:00:38,810
running on Android and iOS.

15
00:00:38,810 --> 00:00:42,330
And to start with local notifications,

16
00:00:42,330 --> 00:00:46,000
we first of all need to install a new package.

17
00:00:46,000 --> 00:00:47,800
With expo install,

18
00:00:47,800 --> 00:00:52,800
we should install the expo-notifications package.

19
00:00:54,260 --> 00:00:55,180
Simply hit enter,

20
00:00:55,180 --> 00:00:58,673
and this will download and install this into your project.

21
00:01:00,880 --> 00:01:02,030
Now, once that is done,

22
00:01:02,030 --> 00:01:03,743
we're ready to write some code.

23
00:01:05,010 --> 00:01:08,320
Now, here, as I said, I want to keep this very, very simple.

24
00:01:08,320 --> 00:01:13,320
So I will simply display a button in this application here.

25
00:01:14,300 --> 00:01:17,200
The built in react native button will do,

26
00:01:17,200 --> 00:01:22,200
set a title of trigger notification.

27
00:01:22,960 --> 00:01:24,310
And when we click the button,

28
00:01:24,310 --> 00:01:26,710
I want to do what the title implies.

29
00:01:26,710 --> 00:01:29,233
I want to trigger a local notification.

30
00:01:30,080 --> 00:01:32,970
Now, this button is automatically centered by default,

31
00:01:32,970 --> 00:01:34,100
which is quite nice.

32
00:01:34,100 --> 00:01:35,620
That's exactly what I want.

33
00:01:35,620 --> 00:01:38,783
And now here I can register a new function.

34
00:01:40,020 --> 00:01:45,020
The trigger notification handler function here,

35
00:01:46,050 --> 00:01:48,070
which is a default arrow function,

36
00:01:48,070 --> 00:01:53,070
which we bind to on press on this button, like this.

37
00:01:53,100 --> 00:01:55,130
And in here, we now, well guess what?

38
00:01:55,130 --> 00:01:57,809
Want to trigger a local notification.

39
00:01:57,809 --> 00:02:02,747
For that we need to import from expo-notifications,

40
00:02:05,770 --> 00:02:10,110
and actually we want to import everything as notifications,

41
00:02:10,110 --> 00:02:11,160
for example,

42
00:02:11,160 --> 00:02:13,340
from expo-notifications,

43
00:02:13,340 --> 00:02:16,038
of course you can name this however you want.

44
00:02:16,038 --> 00:02:18,600
Now with this import here

45
00:02:18,600 --> 00:02:21,291
in this trigger notification handler function,

46
00:02:21,291 --> 00:02:25,450
we can use this imported notifications object

47
00:02:25,450 --> 00:02:27,590
and there we will have a bunch of methods.

48
00:02:27,590 --> 00:02:32,590
And one method is the schedule notification async method.

49
00:02:32,710 --> 00:02:35,670
This is the method that will help us, well,

50
00:02:35,670 --> 00:02:37,600
schedule a notification.

51
00:02:37,600 --> 00:02:42,580
And with that, we always schedule a local notification.

52
00:02:42,580 --> 00:02:44,610
Again, later I will show you

53
00:02:44,610 --> 00:02:46,630
how you send a push notification.

54
00:02:46,630 --> 00:02:51,490
With this method, you always create a local notification.

55
00:02:51,490 --> 00:02:53,490
Now, this method wants an object

56
00:02:53,490 --> 00:02:57,320
where you configure the notification that should be sent.

57
00:02:57,320 --> 00:03:00,030
And as you can see, we've got three basic options

58
00:03:00,030 --> 00:03:00,950
we can set here.

59
00:03:00,950 --> 00:03:04,871
The content of the notification, I'll come back to that,

60
00:03:04,871 --> 00:03:07,683
the trigger, which will simply define

61
00:03:07,683 --> 00:03:10,910
when the notification should be displayed,

62
00:03:10,910 --> 00:03:12,530
and an identifier,

63
00:03:12,530 --> 00:03:16,210
which we could use to cancel this notification

64
00:03:16,210 --> 00:03:17,560
in case we, well,

65
00:03:17,560 --> 00:03:20,643
don't want to display it after it was scheduled.

66
00:03:22,150 --> 00:03:24,800
We don't necessarily need the identifier here.

67
00:03:24,800 --> 00:03:27,020
And therefore I'll start with the content.

68
00:03:27,020 --> 00:03:29,350
The content itself is an object

69
00:03:29,350 --> 00:03:31,460
where you get various options.

70
00:03:31,460 --> 00:03:35,700
Now, not all options are supported on both platforms,

71
00:03:35,700 --> 00:03:37,090
but you can set them all

72
00:03:37,090 --> 00:03:39,440
and if a platform doesn't support it,

73
00:03:39,440 --> 00:03:41,470
it will simply ignore it.

74
00:03:41,470 --> 00:03:44,699
What you can set on all platforms is the title

75
00:03:44,699 --> 00:03:49,400
where I will write my first local notification

76
00:03:51,750 --> 00:03:54,480
and the body of the notification,

77
00:03:54,480 --> 00:03:59,480
this is the first local notification we are sending.

78
00:03:59,710 --> 00:04:02,070
So simply two strings.

79
00:04:02,070 --> 00:04:04,370
Now, as you see, you could set more,

80
00:04:04,370 --> 00:04:07,100
you could set a color, for example,

81
00:04:07,100 --> 00:04:11,270
you could add extra metadata, which you later can retrieve

82
00:04:11,270 --> 00:04:12,853
when the notification fired,

83
00:04:12,853 --> 00:04:14,870
you can give it a priority

84
00:04:14,870 --> 00:04:17,150
which might lead to the operating system

85
00:04:17,150 --> 00:04:19,700
to display it with higher priority,

86
00:04:19,700 --> 00:04:20,880
you can add a sound,

87
00:04:20,880 --> 00:04:23,260
but I will keep it fairly basic here

88
00:04:23,260 --> 00:04:26,030
and just send this basic notification.

89
00:04:26,030 --> 00:04:27,010
You can of course,

90
00:04:27,010 --> 00:04:29,160
play around with the other options as well

91
00:04:29,160 --> 00:04:32,301
and send a more complex push notification.

92
00:04:32,301 --> 00:04:34,290
Now that's the content.

93
00:04:34,290 --> 00:04:36,440
We also need the trigger.

94
00:04:36,440 --> 00:04:38,447
The trigger is also an object

95
00:04:38,447 --> 00:04:41,390
where you simply define when

96
00:04:41,390 --> 00:04:43,633
the notification should be sent.

97
00:04:44,530 --> 00:04:46,853
And there you've got a couple of nice properties

98
00:04:46,853 --> 00:04:48,540
that you can set.

99
00:04:48,540 --> 00:04:50,540
For example, you can set the seconds

100
00:04:50,540 --> 00:04:52,530
until the notification should be displayed.

101
00:04:52,530 --> 00:04:54,913
And I'll set this to 10 seconds here.

102
00:04:55,840 --> 00:04:59,230
Well, and that's scheduled notification.

103
00:04:59,230 --> 00:05:01,250
Let's see whether it works.

104
00:05:01,250 --> 00:05:02,960
For that, I save this,

105
00:05:02,960 --> 00:05:05,280
and after killing the app here

106
00:05:05,280 --> 00:05:08,470
and completely restarting it on Android,

107
00:05:08,470 --> 00:05:10,280
I will press the button there

108
00:05:10,280 --> 00:05:12,243
once the app finished loading.

109
00:05:14,147 --> 00:05:15,740
And now with the app loaded,

110
00:05:15,740 --> 00:05:18,513
I will press this trigger notification button.

111
00:05:19,568 --> 00:05:24,568
Now what we'll notice is that after 10 seconds,

112
00:05:25,371 --> 00:05:27,520
nothing happens.

113
00:05:27,520 --> 00:05:29,640
We don't have any new notification here.

114
00:05:29,640 --> 00:05:32,860
This has nothing to do with the notification we scheduled

115
00:05:32,860 --> 00:05:35,340
and we saw nothing else.

116
00:05:35,340 --> 00:05:37,810
Well, there are a couple of reasons.

117
00:05:37,810 --> 00:05:41,880
For Android we need to do one extra thing

118
00:05:41,880 --> 00:05:43,793
in the app.json file.

119
00:05:44,954 --> 00:05:48,613
There, we need to add the Android entry.

120
00:05:52,000 --> 00:05:54,430
And on Android, you want to set

121
00:05:54,430 --> 00:05:59,430
the use next notifications API to true.

122
00:06:03,810 --> 00:06:05,360
Save that,

123
00:06:05,360 --> 00:06:07,980
and then it might be best if you simply restart

124
00:06:07,980 --> 00:06:10,340
your Expo server with Expo start

125
00:06:10,340 --> 00:06:13,490
so that this new configuration is taken into account.

126
00:06:13,490 --> 00:06:16,670
And there after, to be super safe,

127
00:06:16,670 --> 00:06:20,060
I will simply kill those apps here,

128
00:06:20,060 --> 00:06:23,093
starting with Android, and I'll simply rerun it.

129
00:06:24,980 --> 00:06:27,623
But that will not be the only thing we have to do.

130
00:06:28,830 --> 00:06:32,620
And now that this restarted, let's click the button again.

131
00:06:32,620 --> 00:06:33,453
But as I said,

132
00:06:33,453 --> 00:06:36,431
this will not be the only thing we need to change.

133
00:06:36,431 --> 00:06:39,840
And therefore still, you will see nothing.

134
00:06:39,840 --> 00:06:43,423
If I expand this, I see no notification here.

135
00:06:44,270 --> 00:06:46,240
Well, there is a reason for that.

136
00:06:46,240 --> 00:06:48,710
If your app is in the foreground,

137
00:06:48,710 --> 00:06:51,350
so if it's currently running as it is here,

138
00:06:51,350 --> 00:06:54,963
local notifications by default are not shown.

139
00:06:55,830 --> 00:06:58,530
Now therefore, if I click this again

140
00:06:58,530 --> 00:07:00,780
and now I go to my home screen

141
00:07:00,780 --> 00:07:04,130
so that the app is no longer in the foreground

142
00:07:04,130 --> 00:07:06,525
and it's no longer running,

143
00:07:06,525 --> 00:07:09,370
but instead it's in the background,

144
00:07:09,370 --> 00:07:14,220
you now see this my first local notification pop up here.

145
00:07:14,220 --> 00:07:18,820
Now, if you click it, we're taken back to our application.

146
00:07:18,820 --> 00:07:21,500
Now we're not doing anything in the application

147
00:07:21,500 --> 00:07:23,690
upon this notification yet,

148
00:07:23,690 --> 00:07:25,130
but at least we saw

149
00:07:25,130 --> 00:07:28,960
that we were able to create a local notification.

150
00:07:28,960 --> 00:07:30,113
Now what about iOS?

151
00:07:31,200 --> 00:07:33,853
Let me start the app there again as well.

152
00:07:35,130 --> 00:07:36,670
And let's try the same thing here.

153
00:07:36,670 --> 00:07:39,280
If I click on trigger notification

154
00:07:39,280 --> 00:07:41,420
and I go to the home screen,

155
00:07:41,420 --> 00:07:44,000
let's see whether we get a notification

156
00:07:44,000 --> 00:07:45,930
after 10 seconds there.

157
00:07:45,930 --> 00:07:47,800
I can tell you that we don't need

158
00:07:47,800 --> 00:07:51,263
to set anything up in the app.json file for iOS,

159
00:07:51,263 --> 00:07:55,750
but still I don't see any notification here.

160
00:07:55,750 --> 00:07:59,180
We definitely have no new notification here.

161
00:07:59,180 --> 00:08:00,727
Well, there is an important difference

162
00:08:00,727 --> 00:08:03,450
between Android and iOS here.

163
00:08:03,450 --> 00:08:06,790
On Android, it works just like that out of the box,

164
00:08:06,790 --> 00:08:10,480
on iOS, you need to grant explicit permissions

165
00:08:10,480 --> 00:08:12,610
to receive notifications.

166
00:08:12,610 --> 00:08:14,393
So, let's do that next.