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

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:

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

[MisouSup]

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

[nileshnilu]

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

[robotechwiki]

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

[ebubekirkarakurt]

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

[marktombson]

Very informative and straight to the point, well done

[andreoleari]

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

[HeroZero-ce]

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?

[satishtalewar]

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

[RLAPERU]

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?

[AndyKatana]

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

[almustarik]

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

[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 module in your 'MainApplication.java' file.

2) Added the 'new line inside of the RN 'getPackages()' method list.

[sharminmuqadam]

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

[brandonbailey]

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

[vivek]

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

[lssl-xh]

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

[Abhay.Bhandari]

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

[heinhtetaung]

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

[tobilobagabriel]

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

[BừngLê-og]

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