Push Notifications for a Chat App with React Native 🔴

Let's continue the Chat Messaging app and implement Push Notifications with Firebase, React Native, and Stream Chat SDK. Besides Push notifications, we will also work on exciting features like UI customization and threads.

Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account from Stream

Building in-app messaging functionality from scratch can take months — and that’s just for a bare-bones chat that contains none of the features that savvy app users expect. With the Stream Chat API, you can replicate polished social media messaging experiences found in popular social media platforms such as Facebook Messenger or WhatsApp.

By the end of this video, we will extend our messaging app with the next features:
✨Push Notifications with Firebase
✨UI customizations
✨Threads

🎒 Download the Asset Bundle (Images, Dummy data, PDF presentation, cookies):

🐱‍💻 Source code

💬 Join the notJust Development gang and let's build together

Tag me on social media when you finish this build, and I will give you feedback on your project.

Timecodes:

00:00 - Building Chat App with React Native, Firebase and Stream
01:25 - Stream Chat Messaging SDK Demo
03:30 - Prerequisites for this tutorial
04:15 - Build a Messaging App Part 1 Overview
07:50 - Chat Messaging Documentation in Stream
08:16 - Create a Firebase Project
14:45 - Install React Native Firebase
21:05 - Adding custom native code
27:30 - Testing message sending in Firebase chat
40:30 - Integration with Stream with the Server Key
43:00 - Registering a device with Stream
50:50 - Push Notification Testing in real time
1:10:15 - Interacting with Push Notification
2:15:00 - Thread in a Chat App
2:36:12 - Adding Internationalization (i18n) in Stream
2:43:00 - Summary and Q&A

Disclaimer: This build is for educational purposes only!! All views, opinions, technology choices expressed in this video are my own and do not represent the views, opinions, technology choices of any entity whatsoever with which I have been, am now, or will be affiliated.

#VadimSavin #notjustdev #reactnative

[dualwan]

Thank you Vadim. I am a farmer and already 37 yrs old, trying to be a developer. english is not my 1st language and yet i understand you clearly.

[souvikkundu]

Thank you Vadim, your videos are really helpful. Could you make a video to show how to build a chat service using "AWS-Amplify Push Notifications and PinPoint" ? Thanks :)

[oiay]

This is working without any problems guys

[alexkavanagh]

This was awesome!. I'm really hoping that you may consider a build with expo-push-notifications and a messenger clone like gifted-chat (or a basic firebase messenger). Thanks Vadim! You are incredible.

[proro]

Hello there, can you please make a video using the updated V2 push notifications. I'm unable to figure out how, the docs are lacking. Please make a video on it soon it's a request.

[amanda-gj]

why don't you use AWS Amplify for Push Notifications?

[maryamkhan]

"Hi Vadim, I hope you're doing well. I've recently encountered an issue with my React Native app that uses FCM. The app works fine when it's in the foreground or background, but when it's not running like when the app is killed and I press a notification, the app opens but doesn't take me to the specific screen that I want (i.e., the notification screen). Can you please help me with this issue? I would really appreciate any assistance you can provide. Thank you!"

[HosnaQasmei]

Hi Vadmin, wanted to know what you need to do differently to set this up with IOS?
Is it just adding Push Notifications and the certificates?
Since we can't test it in expo go is the development build enough?

[almagst]

I dont have Project Credentials under Cloud Messaging!

[SADDAMHUSSAIN-ebek]

Hi I have built an app to fetch users current location and to show it on map.
I am using expo location and Google public api but there is one problem in map that it only works in simulation and doesn't work in apk built.
Your help will be highly appreciated if you are aware of the issue.

[mahdihasan]

We need solo react navigation tutorial

[sankalpsaxena]

Hi Can you do a tutorial on download file .pdf, docx, video

[Zahid-ru]

Sor error emulator faild and start the app failed how to solve it please I'm waiting for your reply

[lynnpelly]

Ok but how to add photo de profile on notification

[dualwan]

Next is refactor this to react native web. That would be great because there are not much tutorials about react native web.