Push Notification Using Firebase Cloud Messaging And React Native & Expo | Project And Tutorial

Push Notification Using Firebase Cloud Messaging And React Native & Expo | Project And Tutorial | JS

Рет қаралды 73,751

Жыл бұрын

Hello guys, My name is Rohit Kumar Thakur. In this video, I am gonna show you, how to add push notification feature using fcm (firebase cloud messaging) service and react native & Expo. FCM does not support the Expo Go application directly. So, you have to either go for development build or switch to bare react native.
In this video, I am using development build method. After that connected the android build to the firebase.
React Native Expo is a cross platform framework, which gonna helps you to build mobile apps for both Android & iOS devices. The code part is not that much tough. You just have to follow the video to get the desired output.
Happy Hacking
Topics covered:
✅ Firebase setup for Android React Native and Expo
✅ Use of Developement build method using react native and expo
✅ Foreground notification feature using firebase cloud messaging and react native
✅ Background or quit state notification using FCM ( firebase cloud messaging ) and react native
✅ Code of FCM and react native expo
My social Links:
Instagram: / _ninza7
Twitter: / _ninza7
Website: ninza7.me
Discord: / discord
Video widgets edited by: / kaushal_2319
Music Source: NCS
Tags: firebase, firebase tutorial, what is firebase, firebase tutorial in hindi, firestore, firebase database, react firebase, firebase react, firebase realtime database, react native, react native tutorial, react native tutorial in hindi, react native project, react native tutorial for beginners, react native app, react native full course, react native navigation, native react, react native course, react native projects, what is react native, react native app development, react native firebase, react native crash course, react native ui, learn react native, react native in hindi, react native tutorial for beginners, react native app development, react native project from scratch, react js. expo react native, react native tutorial for beginners, fcm, firebase cloud messaging, foreground notification, background notification, development build method, android and iOS react native expo build, Firebase, firebase console, google firebase, react native firebase, firebase database, firebase pricing, firebase auth, firebase analytics, firebase authentication, firebase login, firebase cloud messaging, firebase storage, react firebase, npm firebase, firebase tutorial, firebase app, firebase sdk, google firebase console, firebase crashlytics, react native firebase auth, firebase fcm, reactfire, firebase web, firebase android, firebase ios, firebase backend, firebase cloud, firebase cloud storage,
#reactjs #javascript #reactnative #ios #android #react #firebase

Пікірлер: 195

@BugNinza 3 ай бұрын

Update Tutorial (HTTP v1): kzfaq.info/get/bejne/r6lymMam3eC5pYk.html

@nileshnilu7902 Жыл бұрын

Thanks 🙏🙏,searched whole KZfaq not find the solution finally it's here.

@BugNinza Жыл бұрын

I'm glad it helped. keep supporting

@MisouSup Жыл бұрын

Nice, it worked for my standalone apk. Thanks! The docs was rather confusing in some parts.

@BugNinza Жыл бұрын

That's why I'm here😉. I'm glad it worked

@marktombson6358 11 ай бұрын

Very informative and straight to the point, well done

@BugNinza 11 ай бұрын

Thanks! Keep Supporting

@andreoleari9287 Жыл бұрын

Hi man, congratulation for the video, this is the only video that helped me, thank' you very much,

@BugNinza Жыл бұрын

Glad it helped!! Keep supporting

@robotechwiki Жыл бұрын

The first tutorial that I follow from start to finish and everything goes as in the video. Good work!!!

@BugNinza Жыл бұрын

Glad it helped! Keep supporting

@AndyKatana Жыл бұрын

A better addition can also be a button to mute notifications. But overall a pretty clean presentation

@BugNinza Жыл бұрын

Thanks for the tip

@user-hr7uo5cj2q Жыл бұрын

I couldn't change the notification icon, I spent a few hours worrying about how to do it, but I couldn't find how to change it in the expo, I managed to change the color of the displayed rectangle as described in but I couldn't change the icon, can you help me?

@heinhtetaung6566 8 ай бұрын

Thank you so much. That was amazing tutorial. 100% working fine according to your instruction. You save my day bro!!!

@BugNinza 8 ай бұрын

Glad it helped!! Keep supporting

@NoureldenRihan Жыл бұрын

Man you're a live saver ❤❤

@BugNinza Жыл бұрын

Haha..!! Keep supporting!

@user-ub8rn3mh5f 8 ай бұрын

I can see the notifications in development mode only in my device, How it works when someone downloaded from playstore,

@1ebubekirkarakurt 4 ай бұрын

thanks but how can i custumize notification bg color or something like that brother?

@greengraphicx6101 8 ай бұрын

wow, you are a life saver,

@BugNinza 8 ай бұрын

Hihi.. keep supporting 🙌

@deckjokey121 3 ай бұрын

Just wonderful.

@BugNinza 3 ай бұрын

Many thanks!

@almustarik 5 ай бұрын

Can you please explain me why we need two SHA-1 keys?

@midhunlalg Жыл бұрын

Much helpful Rohit, Thank you so much. A question, I think the expo notifications won't work in an emulator / simulator, right? just wanted to conform.

@BugNinza Жыл бұрын

you are right

@potatostories Жыл бұрын

@@BugNinza thank you!

@user-vr7ku2rw3p 11 ай бұрын

Very nice video, it really helped me. How can the notification content be generated from a backend like nodejs, instead of typing the notification message manually?

@BugNinza 11 ай бұрын

I'll try and update you.

@narasimhann2814 Жыл бұрын

Great job dude!! Can you comment on how I can send notifications to user specific devices?

@BugNinza Жыл бұрын

Get the FCM registration tokens for the user's device and use it to send the notification

@maksimvashkevich1429 8 ай бұрын

Hello, Friend! Thank you so much for your tutorial! I would like to ask you about how to use FCM without legacy mode? Would you be so kind to record a video clip with the new (HTTP v1 API)?

@BugNinza 8 ай бұрын

Sure, I will try!! Stay tuned

@tobilobagabriel2468 7 ай бұрын

Thanks for the video man, but how do I send notifications in production mode to all user at once using this method of fcm registration tokens

@BugNinza 7 ай бұрын

you need tokens to send notifications

@pradyumncs Жыл бұрын

Thanks ❤️❤️

@BugNinza Жыл бұрын

Any time

@nileshnilu7902 Жыл бұрын

Thanks❤

@BugNinza Жыл бұрын

You're welcome 😊

@anazi Жыл бұрын

Do we need a backend provider if we want to send push notifications (e.g. a person like a post and there other person receives a push notification says "your post received a like") ?

@BugNinza Жыл бұрын

Firebase Cloud Messaging (FCM) itself can be used as the backend provider for sending push notifications in React Native.

@anazi Жыл бұрын

@@BugNinza this will not work for iOS ever ha !?

@Abhay.Bhandari Жыл бұрын

Is it necessary to install package first and create a build? Or can we create a build and then install packages??

@BugNinza Жыл бұрын

Any changes in the app.json file? Build your app.

@Bryan-hc3gf Жыл бұрын

Instead of directly push notifications from Firebase, can we like do our own admin panel to push the notifications but still using Firebase? Is it possible to do that?

@BugNinza Жыл бұрын

Yes, it is possible to create your own admin panel to push notifications while still using Firebase. You can use the Firebase Admin SDK or FCM app server protocols to build message requests and send them to various targets. You can also use the Notifications composer in the Firebase console to send notification messages. This method does not provide the same flexibility or scalability as sending messages with the Admin SDK or the HTTP and XMPP protocols, but it can be useful for testing or for highly targeted marketing and user engagement.

@vivek8270 10 ай бұрын

Was that your physical device or a simulator? If the device then how are you able to access it through your PC ?

@BugNinza 10 ай бұрын

No, I am not using any emulator. It's my physical device. You can do the same. check this: github.com/Genymobile/scrcpy

@user-tj6hs2sn3q 4 ай бұрын

how to show notification data in app when i click notification to get in app and the app not in backgroud running

@BugNinza 4 ай бұрын

I'll come up with a video soon. stay tuned!!

@user-iv5fv9pi8v Жыл бұрын

Thanks, working fine but what about ios device please make a video for ios too, I am not able to implement for ios device

@BugNinza Жыл бұрын

For iOS you have to use APN. Now to test the push notifications remotely, I need an iOS device. But the admin of this channel is poor right now 😂. So, you have to wait a little bit

@realvoices2356 11 ай бұрын

@@BugNinza do you have an IOS device now?

@son_kami 3 ай бұрын

Hi, you saved me a lot of wasted time. I appreciate. would it work for iOS?

@BugNinza 3 ай бұрын

yes, follow the official docs for ios setup

@kalonacharjee1729 Жыл бұрын

subscribed

@BugNinza Жыл бұрын

Thank you ❤️

@shivamshrivastava6530 Жыл бұрын

Expo cli wants to initiate git in my project - would you pls help me about that?

@BugNinza Жыл бұрын

Install git.

@linamicasa2463 Жыл бұрын

hello sir, is it possible to do something like this, when a certain data is stored in the firebase can we trigger the push notification sending?? if so how can we do it?? in my case table1 has a column name alert and data are stored as high and low. when we store the alert as high I need to trigger the notification part.

@BugNinza Жыл бұрын

yes, you have to write jQuery for that

@melvincolmenares8665 Жыл бұрын

@@BugNinza could you give an example?

@nextBestProgrammer Жыл бұрын

How could I push the notification instead of using the firebase console, using a web application, like react js?

@BugNinza Жыл бұрын

Visit this: kzfaq.info/get/bejne/jpubncmIltjKmZs.html

@RLAPERU2 6 ай бұрын

Hello, I have tried to build on IOS, but I get the following error: iOS build failed: Unknown error. See logs of the Install pods build phase for more information. In log of Expo: The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies. Please , What needs to be configured in IOS?

@tytoeu7177 5 ай бұрын

me too! now you solve already or not? i'm error like this with ios. everyone know please help plz 🙏🙏😘😘

@Oogabooga11249 4 ай бұрын

@@tytoeu7177 did you guys figure it out?

@lateefogunbadejo9449 Жыл бұрын

I noticed the push notification only shows in the status bar and notification tray but there isn't any popup when the app is in the background or closed state, how do we get the app to show a popup?

@BugNinza Жыл бұрын

Follow the official docs. rnfirebase.io/messaging/notifications

@lateefogunbadejo9449 Жыл бұрын

@@BugNinza Thank you, would check it out.

@tameredits Жыл бұрын

Hi bro thanks for the tutorial. I have some issues. When i run the project this error pop up: "No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()" how to i solved?

@BugNinza Жыл бұрын

Use firebase Android app instead of web

@tameredits Жыл бұрын

@@BugNinza It doesn't work

@BugNinza Жыл бұрын

DM me on my social media handle.

@wissamardah6680 Жыл бұрын

same error how did you solve this please

@mbd9173 2 ай бұрын

@@wissamardah6680 how did you solve ? please help me

@nileshnilu7902 Жыл бұрын

Sir i want to ask after dev client installed, new libraries installing not working.

@BugNinza Жыл бұрын

Every time you mess with the app.json, you have to rebuild the application

@user-tj6hs2sn3q 4 ай бұрын

How to do after i build app ，not need to put the expo QR code again

@BugNinza 4 ай бұрын

scan the build QR with phone's camera or any other QR code scanner.. and the server running QR with expo go app

@satishtalewar6709 9 ай бұрын

I have question. 1. In Video you mentioned Expo Go wont work here and we need to go with the Developement Build. How it will work for production build. is there any different steps needs to follow. 2. In Video i can see you Sending the push notification manully by entering some text in FCM. But in real world scenario it wont work like that right. If i want to send the push notification automatically on certain button click on the app Let say on successful login i want to send push notification saying "Logging successful" , How should i achieve this

@BugNinza 9 ай бұрын

1. Because of our use of native code, we can't use the Expo Go app here. Sometimes, the app works fine in Expo Go, but throws issues when we publish it to production. Development builds are close to production builds, so you can use them to test your app locally. If you're planning to launch your app, I recommend using development builds. 2. This video is more about how to send push notifications from the server side. For example, if you want to notify users about an upcoming sale, this method is perfect. I will try to implement what you are saying and make a video about it soon. Stay tuned!

@satishtalewar6709 9 ай бұрын

Thanks for the reply. Will wait for your video for #2@@BugNinza Also on #1 I tried to use the development build but it didnt worked. This is my configuration in eas.json "development": { "channel": "development", "android": { "buildType": "apk" } It worked for this but i dont think this is the correct way. Becuase on opening the app with the below config it shows enter url and all. "preview3": { "developmentClient": true },

@aniketdhage2604 3 ай бұрын

Hello sir, my app is not opening when i click on notification. can you please tell me why this behavior happening

@BugNinza 3 ай бұрын

You have to write code for that

@nasyxrakeeb8665 Жыл бұрын

Can you please share the code of this project...

@sharminmuqadam7427 10 ай бұрын

m getting this error The expected package.json path: \expo-dev-client\package.json does not exist

@BugNinza 10 ай бұрын

Reset your project.

@user-uv1yw8dd8e Жыл бұрын

i get the error "Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist." when using firebase's message()

@BugNinza Жыл бұрын

You cannot test your code in Expo Go. I mentioned this in the video. Please follow the video carefully to get the desired result. Let me know if you have any further questions.

@benjaminagyekum7283 Жыл бұрын

how do i send the generated token to my laravel backend?

@BugNinza Жыл бұрын

Check the official docs of laravel

@brandonbailey8323 4 ай бұрын

why are you using the legacy firebase api? no one is using the v1 api and the legacy api is about to stop working as of june this year

@BugNinza 4 ай бұрын

I'll add a new video stay tuned

@maurogalvan7544 4 ай бұрын

@@BugNinza Hola, ya lo subiste?

@jasondavid4996 Жыл бұрын

Will this work on iOS? Thank you! :)

@BugNinza Жыл бұрын

FCM is not currently available for expo-notifications on iOS. Read the official documentation: docs.expo.dev/push-notifications/using-fcm/#client-setup

@realvoices2356 11 ай бұрын

@@BugNinza how can we do this on IOS?

@Dimz_theSW Жыл бұрын

can u help me please Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.messaging(). Ensure you have: 1) imported the 'io.invertase.firebase.messaging.ReactNativeFirebaseMessagingPackage' module in your 'MainApplication.java' file. 2) Added the 'new ReactNativeFirebaseMessagingPackage()' line inside of the RN 'getPackages()' method list.

@BugNinza Жыл бұрын

Firebase messaging is not installed in your project. Please watch video carefully. You can install it using the command: npm i @firebase/messaging

@n-frame7688 Жыл бұрын

I also have this problem. And i installed @react-native-firebase/messaging

@n-frame7688 Жыл бұрын

How do you resolve this problem ?

@perammanasa6707 3 ай бұрын

Not getting alert popup when I send the message Can you please help me

@BugNinza 3 ай бұрын

Hey I'll upload the updated tutorial soon. I'll be using HTTP V1 method for the push notification. stay tuned

@ilhamfebrianarwansyah7991 Жыл бұрын

may i know what version of your react-native-firebase that you are using in this video?

@BugNinza Жыл бұрын

I guess 16.4.3 npm i @react-native-firebase/app@16.4.3

@jeffypegares5224 Жыл бұрын

man why eas login 'eas' is not recognized as an internal or external command, operable program or batch file.

@BugNinza Жыл бұрын

because you haven't installed eas-cli. Install it using the command: npm install -g eas-cli Don't skip video😉

@ipanxbread Жыл бұрын

@@BugNinza i also stuck here, thanks for the question n thanks for the answer

@user-ub8rn3mh5f 8 ай бұрын

I can see the notifications in development mode only in my device, How it works when someone downloaded from playstore,

@BugNinza 8 ай бұрын

You have to add permissions. And once your project starts working flawlessly in development build mode, it will work fine when downloaded from the Play Store.

@user-ub8rn3mh5f 5 ай бұрын

ok Thank u for the reply and it works @@BugNinza

@VivekThakur-sf9pr Жыл бұрын

Sir, Please have a dynamic links firebase for react native expo

@BugNinza Жыл бұрын

Noted

@SoapCS2 10 ай бұрын

Bro but you only sent a test message and got token from console, but how do i send a notification to all the users who install my app

@BugNinza 10 ай бұрын

After app uninstall? 👀 How you gonna send any kinda notification without an app?

@SoapCS2 10 ай бұрын

@@BugNinza no i am talking about the notification you sent at the end, you sent to a particular app by using token, what if i want to send to 1000 users?

@SoapCS2 10 ай бұрын

i meant to say Install@@BugNinza

@krithikshailesh362 Жыл бұрын

Does this work on ios EAS builds?

@BugNinza Жыл бұрын

use APN for iOS. Process is same

@NileshSharma-yt6mk Жыл бұрын

[Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android proje]t by calling firebase.app(). this error, any soution for that ? ....

@BugNinza Жыл бұрын

The firebase module is not installed on your Android project. Install it. Then follow the tutorial carefully

@egavriluk 11 ай бұрын

@@BugNinza Thank you for this tutorial, but I have the same issue - Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app(). I installed all needed dependecies "@react-native-firebase/app": "^18.3.0", "@react-native-firebase/messaging": "^18.3.0", "firebase": "^10.1.0", but it still returns this Error. What could I do with that?

@egavriluk 11 ай бұрын

I solved that issue. The reason was I tried to launch the app in Expo Go without dev mode, however, I installed that dev-client. Initially, Expo Go does not support any custom plugins. So, don't do my mistake.

@ifrasaleem2041 Жыл бұрын

I am facing issue in the installation of build file in my android device

@BugNinza Жыл бұрын

Show me your error on my social media handle. or, you can try again

@ifrasaleem2041 Жыл бұрын

I send you the error on Instagram

@user-oq1et6ge5e 9 ай бұрын

can you share project?

@rajeshkrchaudhary3245 Жыл бұрын

property 'messaging' does not exist having in my code anybody can help me

@BugNinza Жыл бұрын

Make sure you have installed @react-native-firebase/messaging package and imported the messaging component properly.

@rajeshkrchaudhary3245 Жыл бұрын

Brother is it work on apk because i am working on webView app

@BugNinza Жыл бұрын

Yes!!!

@nilo4444 9 ай бұрын

Would you be able to teach how to do it for IOS?

@BugNinza 9 ай бұрын

Once I have an iPhone, Sure!! Poor Admin..

@DesignMade-Easy 10 ай бұрын

can we not run npx expo start anymore ? do we have to build the app every time we change something or update the code ?

@BugNinza 10 ай бұрын

no, not really. you have to build the app every time you make changes to the app.json file only

@DesignMade-Easy 10 ай бұрын

@@BugNinza so since we rebuild now I can change and add pages to my project and can run the app in expo app normally great Also why did we add the code for iOS permission if on fire ase we made the app Android will still work that way ?

@nosikuminyoi18 10 ай бұрын

what emulator are you using?

@BugNinza 10 ай бұрын

Not any emulator. Just Expo go app. And then mirror the device screen to pc

@andreetorres9594 10 ай бұрын

? Gran trabajo amigo puedo generar mi apk con profile preview y funcionaria igual o crees que no ?

@BugNinza 10 ай бұрын

¡Sí! funcionará de la misma manera. Como los documentos de la exposición sugirieron tanto el método de compilación de desarrollo como el de vista previa del perfil. Me gustaría sugerirle que revise los documentos para obtener una mejor idea.

@andreetorres9594 10 ай бұрын

Muchas gracias amigo, gracias por tu respuesta !! @@BugNinza

@Hugomarangao-td8ep Жыл бұрын

How much do you charge to make this system in my app? ?

@BugNinza Жыл бұрын

It depends on the complexity of the app.

@Hugomarangao-td8ep Жыл бұрын

@@BugNinza It's working on android but guild year for iOS doesn't work

@GameCrawl 7 ай бұрын

Is the code in Github?

@BugNinza 7 ай бұрын

Check description

@VivekThakur-sf9pr Жыл бұрын

How to send data notification through FCM from backend

@BugNinza Жыл бұрын

This is a general code of FCM. If you want to do specific things then I suggest you read the docs.

@VivekThakur-sf9pr Жыл бұрын

@@BugNinza can you please provide me the link

@pavedngoune1097 Жыл бұрын

what is eas credentials?

@BugNinza Жыл бұрын

The command "eas credentials" is used in Expo to manage your app signing credentials.Expo automates the process of signing your app for Android and i0s, but in both cases, you can choose to provide your overrides.EAS Build can generate signed or unsigned applications, but to distribute your application through the stores, it must be a signed application .EAS can host your app signing credentials and take care of sharing them with teammates that have the necessary permissions

@oneafrodev Жыл бұрын

Error: Command failed: lsof -i:5554 -P -t -sTCP:LISTEN how do I solve this?

@BugNinza Жыл бұрын

This error has nothing to do with this project

@oneafrodev Жыл бұрын

@@BugNinza the app runs but I don’t seem to get the token on my console

@ivanandreev8945 Жыл бұрын

On Android API 33+ you should request permission now 😏

@BugNinza Жыл бұрын

I appreciate the update. I'll make sure to get this updated as soon as possible.

@wildandvibe Жыл бұрын

How can i implement for ios build

@BugNinza Жыл бұрын

Follow the video and documentation

@bitsnbytes398 11 ай бұрын

how to integrate it with ios?

@BugNinza 11 ай бұрын

I simply followed the official docs for Android. So, just follow the official docs for ios ( specially for build )

@parthsarathi-lx7dn Жыл бұрын

COD soldier spotted

@BugNinza Жыл бұрын

I'm going in. Need backup!! 😉

@user-qn4ci1cc8t 5 ай бұрын

and code?

@BugNinza 5 ай бұрын

Check description

@user-qn4ci1cc8t 5 ай бұрын

??????????????????? @@BugNinza

@armaankhan192 Жыл бұрын

Bro you are sending message from firebase by clicking "send message". How to generate it automatically on app screen? E.g, A user has set a threshold value and if the value of the variable increases from the set threshold then the notification alert should be generated on App for it. Please help

@BugNinza Жыл бұрын

In your React Native app, create a function that will be triggered when the user reaches the threshold value. This function should send a request to the FCM API to send a push notification to the user's device.

@armaankhan192 Жыл бұрын

@@BugNinza I am new to react native kindly elaborate me. 1- I will need to create an input form and take value from the user, then pass that value to useState hook. 2- The create a function where I will compare the threshold value set by user with the value coming from real time db of firebase. If threshold value reaches it will Tigger an other function where I will send request to FCM API. 3- The notification message will be generated. Right ?

@armaankhan192 Жыл бұрын

@@BugNinza do you have any video on your channel on how to send request to FCM ApI?

@BugNinza Жыл бұрын

DM me. I'll try to figure it out

@armaankhan192 Жыл бұрын

@@BugNinza DM you where and what?