Push Notification In React Native Using Firebase - Android & IOS Tutorial 2023

Hey this is Sheikh Adnan, In this tutorial you’re going to learn how to implement push notifications in Android as an app feature using React Native and Firebase.
#pushnotification #android #reactnative #codewithadnan
What Are Push Notifications?
Push notification is a small message that users receive on a device. They differ from regular pop-ups because they will appear on the device whether or not the user is currently using the site or app that the notification is tied to.
Push notifications work for both browsers and apps. For browsers, push notifications can show up no matter what site a user is on, as long as they’ve opted in to push notifications. They work very similarly for apps, however, they can pop up on a mobile device at any time, regardless of whether the user is on the app.
Notification In IOS Link:
• Push Notification In R...
Follow me on Facebook:
/ 12cadeveloper
Tropical House Music | SEA by Alex-Productions | / @alexproductionsnocopy...
Music promoted by www.chosic.com...
Creative Commons CC BY 3.0
creativecommon...
If you like this video, Please Likes, Comments, Subscribe to support us...
Thanks.
Starting with React Native #codewithadnan @code with adnan

[@theycallmekingmo]

Simple to follow but my app kept crashing after integrating your method...can i share my code with you maybe i am missing something

[@CodeWithAdnan]

Sure

[@theycallmekingmo]

@@CodeWithAdnan please share your email thanks

[@lewis2211000]

@@theycallmekingmo have you fixed that?

[@theycallmekingmo]

@@lewis2211000 not yet

[@CodeWithAdnan]

@@theycallmekingmo [e-mail]

[@harshitparkar]

Remove IOS Tutorial from the title 🙂

[@effiongbenjamin3305]

Am I the only one dancing to your music

[@ifeanyiakomas1722]

This was actually the first tutorial that made my app notification work😎😎

[@maheshbirajdar4855]

What you did between 7:41 - 7:43 frame, code looks different..

[@ipanxbread]

yeah, he also did something to his App.js offscreen.. how is this a tutorial..

[@muthiulhaqhaq3835]

Thank you Sir, simple and straight forward (like)

[@B8dya]

you show that you get old token and new from this function but where you invoke that?
help

[@andresescorcia6587]

Mil gracias por tu aporte, excelente video, funcionando al dia de hoy 10-04-2023

[@alejandrocardenas1570]

Hola, me podrías indicar donde encontraste la server key?

[@andresescorcia6587]

@@alejandrocardenas1570 en settings la tuerca azul, después le das habilitar a la cloud messaging API legacy

[@alllyrics4321]

Great tutorial!!!, sadly it seems on android a console.log is not enough to show the push notification.
Edit: The permission request was missing, now everything works fine. Good tutorial.

[@nahalasignature6684]

but why notification doesnt appear when app is in foreground??..please share the code for that too

[@banguyen3368]

I have done it like this. Receive notification but not show pop-up in Android with react native

[@hassannassif143]

I did every step, but I cant receive the message as a notification from fcm, any help please.

[@PatrickDReis]

Thanks! What theme are you using?

[@akashsr6619]

The push notification is come in my console only not in my physical device

[@kylepham3650]

we can use notifee library to show noti.

[@razaaku]

hi is it possible when i received notification my mobile screen turn to On?

[@jeffersoninacio5513]

In my case it's almost working... I send the push notification but my device only receive on display if I open the app. Do you have any ideia why?

[@dongnez]

Thanks, very simple and straightforward👍

[@CodeWithAdnan]

Pleasure 😊

[@aereowatcher9131]

work perfectly! thx

[@chinmayk3409]

Hi Notification permission not enabling , thats why notification not coming in my mobile , can you please tell how to popup permision of push notification in android . Thanks in advance

[@ThanhPham-se6gu]

When I use the messaging.requestPermission() method the system modal doesn't display so I can choose "Allow / Dont allow". Some time ago it did but recently it stopped and just returned authorization: 1. On iOS it displays the modal but not on Android.
Can you elaborate on this? :) Thanks in advance.

[@mr.programer4918]

Thanks Buddy its help me to solve my problem 🙂

[@akinjidesleek]

hi, where exactly are you calling the GetFCMToken function?

[@whynesspower]

Its being called when the token is retrieved from AsyncStorage and is found to be expired. See the video again

[@TheGinoooo]

Hi! Great video, but could you please keep explaining how to proceed for iOS?

[@CodeWithAdnan]

Wait only 2 days soon upload

[@sortionline]

It Works!, Thank you Adnan.

[@CodeWithAdnan]

Pleasure ☺️

[@BajoQTI]

You can add a notification as "mailbox" and when you open a notification, the open notification opens in the "mailbox"

[@CodeWithAdnan]

Yea

[@poojarajendran9616]

Could you please show a demo of how navigate to a screen on clicking the notification ?

[@CodeWithAdnan]

I thint its easy to understand in video

[@saxenavedant61]

Thanks a lot just have a question is the app in running in the background or in quit state I want to open the app and navigate to a specific screen in react native how to do that?
I am trying to build a call app and using push notifications for in coming calls so I have to open the app and navigate tp in call dailer screen whenever I receive a call ie receive a notification.
How to do that ?

[@saxenavedant61]

Upadte: I want to open app on setBackgroundMessageHandler of rnfirebase and reroute to a specific page.
How to do that in index.js

[@pradeep9137]

No notification im getting when implementing this, i followed every step still it doesn't work . Pls help on this asap

[@CodeWithAdnan]

Send me screenshot on social media account that’s mentioned in detail

[@davitgigauri6053]

thank you very much. With me everything works on both platforms though it does not work on disconnected Android

[@CodeWithAdnan]

brother it’s just example not proper work and when you disconnect your device it’s definitely not work because you are in debugging mode.

[@poojarajendran9616]

Got it working.. thanks :)

[@CodeWithAdnan]

Thanks for support 😊

[@saigoarashi5895]

it's work, thank you.

[@jvanderhorst2011]

please explain for the n00bs like me thx

[@charbel4090]

AsyncStorage is deprecated

[@relaxforever8881]

Aoa can you link the git repo thanks in advance

[@marioantonio5019]

in order to send real notifications to my real costumers, I'll stick with this test website or head directly to firebase console push notifications section?

[@CodeWithAdnan]

you just use only cloud messaging using firebase, save your notification in real time database or firestore. you have no need of this helper website to push notifications.

[@luxmailsundhar]

GetFCMToke function not working. console not print(console.log(fcmtoken, 'old token');) how to solve this issue sir.

[@fotios4902]

do you call it
export const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
console.log('Authorization status:', authStatus);
getFCMToken();
}
};

[@charbel4090]

same

[@B8dya]

where you invoke this GetFCMToken() method?

[@amiramaouch2774]

did u figure that out? i don't know why he skipped this part !

[@B8dya]

@@amiramaouch2774 yes, sure
I invoke it near requestUserPermission and getCustomerDevice functions

[@robinildefonsoildefonso8512]

where did you generate you server key??

[@zineddineamariche]

Same for me !!!!

[@robinildefonsoildefonso8512]

@@zineddineamariche found it, you need to enable the Cloud Messaging API (Legacy)

[@zineddineamariche]

​@@robinildefonsoildefonso8512 yes i found the solution thanks .

[@pradeep9137]

integrated like you did , but when i push notfications , it doesnt appear , i followed everything , but it doesnt work, pls help on this stuck here for 2 days

[@hassannassif143]

Same to me

[@anuradhamate5116]

Hello can u please share git repo

[@dileepnagendra8199]

Thanks

[@drfarwa-physiotherapist]

Good

[@kaunghtethein3322]

thank you. can you do the same in ios simulator?

[@CodeWithAdnan]

Yes i can do in ios but require paid apple account. InshAllah in future i upload that video. 😊

[@CodeWithAdnan]

and thanks for your supporting

[@kaunghtethein3322]

@@CodeWithAdnan thanks for the reply brother

[@itachileiva]

@@CodeWithAdnan why require a paid apple account? send push notificacion in backgroun for ios i have to pay?

[@keremerguner4111]

Thank you so much :)

[@CodeWithAdnan]

Pleasure 😊 & Support me Thanks

[@TechWithYasir]

where is ios, why you distract with your caption

[@CodeWithAdnan]

Don't worry iOS part coming soon InshAllah

[@talhamujahid7433]

@@CodeWithAdnan waiting for ios part.

[@yogeshk6671]

where do you render pushnotification_helper.js its not show in the vid , my app wont run the function inside pushnotification_helper.js without rendering. could you help please

[@NickKubde]

Yes same question by my side also

[@Enkeii93]

Just add that to App.js:
import {requestUserPermission, NotificationListener} from "./src/utils/pushnotification_helper"
useEffect(() => {
requestUserPermission();
NotificationListener();
}, [])

[@yourjhay]

up

[@poojarajendran9616]

in App.js file he have used a similar import statement " import {requestUserPermission,notificationListener} from './src/utils/pushNotification_helper'; "

[@abdur-rahmaanmohabbat600]

He skips that part for some reason. go to 9:42 and you can see the change he made to app.js, he imported request permission and ran it in the app through useeffect

[@luisvanegasdev95]

Hello, great video, would you make one with an expo?

[@CodeWithAdnan]

okay sure

[@brandon400]

doesnt work initially with expo???

[@darshanchudasama7834]

Only android not ios edit your caption

[@vishalahir9179]

bro can i get git repo for this demo ?

[@CodeWithAdnan]

Link i think in description

[@vishalahir9179]

@@CodeWithAdnani can't found link in description so plz give me in replay

[@reinaldorequena530]

hi, and IOS config?

[@CodeWithAdnan]

You get soon InshAllah

[@thanhcao5348]

anyone crashing app when push notification?

[@Prajjwalgupta-hs1gw]

mera nhi chal para

[@CodeWithAdnan]

Version update kr k dakh lo

[@WaqasAli-tn3pe]

no IOS setup

[@CodeWithAdnan]

Wait I will be upload soon

[@saadniazi8039]

good

[@anass9487]

Barra yarhem waldik

[@FranciscoHermoso-ii8cn]

Excellent. so you have for ios

[@CodeWithAdnan]

Yes I do

[@mickey01]

pls use code formatter

[@CodeWithAdnan]

Thanks for your suggestion

[@sandeeprana3128]

Can you provide with same notification for ios

[@CodeWithAdnan]

Yes i can but still active i will be upload in future

[@awais882s]

JazakAllah

[@CodeWithAdnan]

🥰

[@devabra_com]

good luck good video

[@CodeWithAdnan]

Thanks ☺️

[@IamYourFudder]

Where can you get the server key on the latest firebase cloud messaging? xD

[@IamYourFudder]

Nevermind, I figured it out

[@kokenyszabolcs4898]

@@IamYourFudder I have the same issue, how did you get the server key?

[@kokenyszabolcs4898]

Solved. I had to enable the Cloud Messaging API (Legacy)