React Native Push Notifications for iOS and Android
Вставка
- Опубліковано 11 лют 2025
- Learn how to set up Push Notifications in React Native for both iOS and Android. When a Facebook Messenger user doesn't have the application open on their phone, but receive a message from a friend, it is important that they can read our message. Push notifications are used to alert the user that they have received a message whilst the chat application is inactive and running in the background.
--------------------------------------------------
Recommended Udemy courses
--------------------------------------------------
NestJS - Zero to Hero: tinyurl.com/3r...
React - The Complete Guide: tinyurl.com/2t...
Angular - The Complete Guide: tinyurl.com/4h...
React Native - The Practical Guide: tinyurl.com/3w...
Docker Mastery (with Kubernetes + Swarm): tinyurl.com/ye...
NestJS API code: github.com/Jon...
React Native code: github.com/Jon...
0:00-01:10- Introduction
01:16-02:40-Push Notification Demo
02:41-19:26-Push Notification Coding
Does this method also work when the background app process is closed? In my case I get notifications if the app is running in the background, but not when its process is shut down by me or by a cleaner tool.
Love the video but man a different social advertisement every 20-30s is extremely distracting.
Does it work quietly in the background on iOS?
hey, nice tutorial,
did you run into this error from google playstore :
Your use of exact alarms is causing your app to crash for some Android users
Good video, but you explain a lot of things and don't actually do most of them. It would be useful if you did everything you are telling us to do. And also having the installations links in the description. Other than that good stuff
I will add in the video sdk documentation link to the description. This shows you how to install the third party library for iOS and Android. I only have an Android device so it doesn't make sense for me to go through the iOS installation without being able to verify it works on the device. If you get stuck, please feel free to clone the GH repo.
Can you please explain in greater detail how you decide where the notification is being sent? And how the recipient's device knows which notification it is receiving? I'm new to react native and trying to implement on iOS using firebase
i need firebase to the ios part too?
Video ended and we didn't get any preview or anything about how the code was implemented and worked. Added all this code to my project and now is broken
I did show the preview at the very start of the video. Unlike the other videos, I needed to use the actual device rather than the emulator, to record the screen. It is quite awkward and takes a lot of setup to do this, hence the video at the start. It should work though. Try to clone the RN repo from GH and add in your environment variables.
@@JonPeppinck Okay will try thanks
Are there any good resources for learning how to develop without an expo workflow? All the courses on Udemy use Expo and Im looking at your code and have no idea what is going on.
I think it's fine to just copy and paste the code from the documentation of reputable packages with just a high level understanding. Otherwise, you will need to learn more about true native development in Java for Android and Swift for iOS. In particular, installing packages and making use of native features. There used to be a time where Expo was terrible and packages and native features one may need simply weren't compatible. However, the expo team has done a good job at making things easier, hiding all the true native code that needs to be there, with a simple command line installation. However, you need to know your requirements and do a little research, whether or not you can get away with expo. If you can use Expo, it will make things easier. I've found for enterprise level projects, there comes a time where you just need something that isn't compatible with expo. You can still eject your project, but the larger it is, the more things that can go wrong. You will probably get more comfortable with it if you follow a couple of random tutorials on the topic and then use the same steps to install some random package in your project.
Hi Jon, this is very great course on microservices and NestJS. Will you also do a deployment and testing as well ?
Thanks for checking it out. I have already got videos on my channel with regards to testing both NestJS and react applications. Unit testing, integration / e2e testing. With regards to deployment, I want to come back to deployment and other DevOps topics, most likely with AWS. Although that may be a few months away.
@@JonPeppinck Can you answer if it will work if the background app process is closed please?
are you using database here to store notifications?
The push notifications alert the user when they have received a message, and the message is stored in the database.
@@JonPeppinck is it mongo database?
i am using mongo database to build my project and i have to use push notification but i didn't find any videos to teach me that. they always use firebase.
@@hihihoho1900 this video is from the Facebook messenger clone playlist and I have created a video which shows all the highlights and technology used. Saving notifications into a mongo database is just a POST request. I have a video on CRUD operations with NestJS and mongo, which is the first video in the Amazon clone playlist, if you don't already know how to do that. Since I am sending push notifications to a users phone in response to a message, I needed to use web sockets. Most of the tricky work relating to push notifications with RN and the websockets is covered in this video, assuming you are using NestJS for your backend. Saving the data to your Mongo DB is then trivial.
can we see notifications in ios Simulator??
Can share github link for this demo please ?
There is a link in the description to the GH repo.
Heey Jon, make a fluid video... this type of video with you speaking and a bunch of prints is horrible... anyway I sort of understood and will try to implement it
I felt this boring and it is very slow paced.
Even after changing playback speed to 2x, you seemed very slow.
🤦😒