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

Подписаться 10 тыс.

Просмотров 73 тыс.

50% 1

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

Опубликовано:

23 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 195

@BugNinza 3 месяца назад

Update Tutorial (HTTP v1): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yCBecuxzUuU.html

@nileshnilu7902 Год назад

Thanks 🙏🙏,searched whole RU-vid 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

@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

@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

@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?

@1ebubekirkarakurt 4 месяца назад

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

@almustarik 5 месяцев назад

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

@AndyKatana Год назад

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

@BugNinza Год назад

Thanks for the tip

@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,

@greengraphicx6101 8 месяцев назад

wow, you are a life saver,

@BugNinza 8 месяцев назад

Hihi.. keep supporting 🙌

@deckjokey121 3 месяца назад

Just wonderful.

@BugNinza 3 месяца назад

Many thanks!

@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!!

@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!

@heinhtetaung6566 7 месяцев назад

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

@BugNinza 7 месяцев назад

Glad it helped!! Keep supporting

@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 !?

@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

@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

@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.

@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

@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?

@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

@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?

@shivamshrivastava6530 Год назад

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

@BugNinza Год назад

Install git.

@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

@nextBestProgrammer Год назад

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

@BugNinza Год назад

Visit this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X5kjfW1rfig.html

@pradyumncs Год назад

Thanks ❤️❤️

@BugNinza Год назад

Any time

@nileshnilu7902 Год назад

Thanks❤

@BugNinza Год назад

You're welcome 😊

@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.

@sharminmuqadam7427 10 месяцев назад

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

@BugNinza 10 месяцев назад

Reset your project.

@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.

@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.

@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

@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?

@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

@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

@benjaminagyekum7283 Год назад

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

@BugNinza Год назад

Check the official docs of laravel

@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?

@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.

@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

@kalonacharjee1729 Год назад

subscribed

@BugNinza Год назад

Thank you ❤️

@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

@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

@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.

@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 },

@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 ?

@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

@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

@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

@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.

@VivekThakur-sf9pr Год назад

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

@BugNinza Год назад

Noted

@nasyxrakeeb8665 Год назад

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

@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

@krithikshailesh362 Год назад

Does this work on ios EAS builds?

@BugNinza Год назад

use APN for iOS. Process is same

@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 ?

@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

@nilo4444 9 месяцев назад

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

@BugNinza 9 месяцев назад

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

@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?

@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

@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

@rajeshkrchaudhary3245 Год назад

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

@BugNinza Год назад

Yes!!!

@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 )

@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

@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

@GameCrawl 7 месяцев назад

Is the code in Github?

@BugNinza 7 месяцев назад

Check description

@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

@user-oq1et6ge5e 9 месяцев назад

can you share project?

@nosikuminyoi18 10 месяцев назад

what emulator are you using?

@BugNinza 10 месяцев назад

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

@user-qn4ci1cc8t 5 месяцев назад

and code?

@BugNinza 5 месяцев назад

Check description

@user-qn4ci1cc8t 5 месяцев назад

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

@parthsarathi-lx7dn Год назад

COD soldier spotted

@BugNinza Год назад

I'm going in. Need backup!! 😉

@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?

@wildandvibe Год назад

Anybody have the source code

@BugNinza Год назад

You can request codes for up to 3 videos by joining the "Elite Ninza Army" membership. You can join here: ru-vid.com/show-UCLTAVHeuoOyc4aFIA1o6Xygjoin

@wildandvibe Год назад

@@BugNinza is this usefull for expo app im builf expo app for ios amd android