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

[@BugNinza]

Update Tutorial (HTTP v1): kzbin.info/www/bejne/r3Sllparrd-Iq7c

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

[@maksimvashkevich1429]

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]

Sure, I will try!! Stay tuned

[@1ebubekirkarakurt]

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

[@son_kami]

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

[@BugNinza]

yes, follow the official docs for ios setup

[@perammanasa6707]

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

[@BugNinza]

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

[@HeroZero-c9e]

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?

[@Eulercode-v8g]

and code?

[@BugNinza]

Check description

[@Eulercode-v8g]

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

[@GameCrawl]

Is the code in Github?

[@BugNinza]

Check description

[@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]

@@wissamardah6680 how did you solve ? please help me

[@sharminmuqadam7427]

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

[@BugNinza]

Reset your project.

[@nileshnilu7902]

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

[@BugNinza]

I'm glad it helped. keep supporting

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

[@aniketdhage2604]

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

[@BugNinza]

You have to write code for that

[@vivek8270]

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

[@BugNinza]

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

[@BừngLê-o9g]

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.

[@NovuyoTsambani]

Thank you!

[@BugNinza]

Welcome!

[@tobilobagabriel2468]

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]

you need tokens to send notifications

[@lssl-x2h]

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

[@BugNinza]

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

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

[@almustarik]

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

[@RLAPERU2]

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]

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

[@Oogabooga11249]

@@tytoeu7177 did you guys figure it out?

[@marktombson6358]

Very informative and straight to the point, well done

[@BugNinza]

Thanks! Keep Supporting

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

[@VivekThakur-sf9pr]

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

[@BugNinza]

Noted

[@lssl-x2h]

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

[@BugNinza]

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

[@VaishnuTejaSS]

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

[@BugNinza]

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.

[@VaishnuTejaSS]

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

[@satishtalewar6709]

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]

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]

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

[@brandonbailey8323]

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]

I'll add a new video stay tuned

[@maurogalvan7544]

@@BugNinza Hola, ya lo subiste?

[@GharabidiDeepak]

can you share project?

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

[@nextBestProgrammer]

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

[@BugNinza]

Visit this: kzbin.info/www/bejne/jmbOm5mNZteZn8k

[@nasyxrakeeb8665]

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

[@nilo4444]

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

[@BugNinza]

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

[@SamGreen-n1l]

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]

I'll try and update you.

[@rajeshkrchaudhary3245]

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

[@BugNinza]

Yes!!!

[@sahanhasret]

How to use IOS?

[@BugNinza]

build your app for ios. follow the official docs

[@sahanhasret]

@@BugNinza another question. Can I send it to all users without buying tokens this way? Or is the token we receive valid for every device?

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

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

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

[@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]

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

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.

[@arpitvijay9382]

shut the background music

[@BugNinza]

Sorry to hear that. It's my old video. The BGM is much improved in the recent videos.

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

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

[@andreetorres9594]

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

[@BugNinza]

¡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]

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

[@nosikuminyoi18]

what emulator are you using?

[@BugNinza]

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

[@AmitJaiswal-z4j]

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]

@@BugNinza do you have an IOS device now?

[@wildandvibe]

How can i implement for ios build

[@BugNinza]

Follow the video and documentation

[@shivamshrivastava6530]

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

[@BugNinza]

Install git.

[@SoapCS2]

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]

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

[@SoapCS2]

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

i meant to say Install@@BugNinza

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

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

[@krithikshailesh362]

Does this work on ios EAS builds?

[@BugNinza]

use APN for iOS. Process is same

[@benjaminagyekum7283]

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

[@BugNinza]

Check the official docs of laravel

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

[@bitsnbytes398]

how to integrate it with ios?

[@BugNinza]

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

[@NoureldenRihan]

Man you're a live saver ❤❤

[@BugNinza]

Haha..!! Keep supporting!

[@VaishnuTejaSS]

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

[@parthsarathi-lx7dn]

COD soldier spotted

[@BugNinza]

I'm going in. Need backup!! 😉

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

[@deckjokey121]

Just wonderful.

[@BugNinza]

Many thanks!

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

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

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

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

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

[@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: kzbin.info/door/LTAVHeuoOyc4aFIA1o6Xygjoin

[@wildandvibe]

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

[@greengraphicx6101]

wow, you are a life saver,

[@BugNinza]

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

[@kalonacharjee1729]

subscribed

[@BugNinza]

Thank you ❤️

[@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]

@@BugNinza how can we do this on IOS?

[@nileshnilu7902]

Thanks❤

[@BugNinza]

You're welcome 😊

[@pradyumncs]

Thanks ❤️❤️

[@BugNinza]

Any time

[@heinhtetaung6566]

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

[@BugNinza]

Glad it helped!! Keep supporting

[@DesignMade-Easy]

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]

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

[@DesignMade-Easy]

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

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

[@Tomaks28]

Poor content, you should change notification icon and color in status bar

[@BugNinza]

Extremely sorry! I will improve the content. Thanks for the suggestion

[@potatostories]

not a poor content really, much helpful for so many developers

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

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