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

Поділитися
Вставка
  • Опубліковано 5 лют 2025
  • Hey this is Sheikh Adnan, In this tutorial you’re going to learn how to implement push notifications in IOS as an app feature using React Native and Firebase.
    #pushnotification #ios #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 Android Link:
    • Push Notification In R...
    Github Repo Link:
    github.com/she...
    Follow me on Facebook:
    / 12cadeveloper
    Follow These Steps:
    Step1:
    yarn add @react-native-firebase/app
    yarn add @react-native-firebase/messaging
    cd ios/ && pod install
    Step2:
    Configure firebase in IOS side.
    Download the GoogleService-Info.plist file
    Right click on the project name and "Add files" to the project.
    Configure Firebase with iOS credentials
    Step3:
    Add firebase.json file
    and add these lines of code
    {
    "react-native": {
    "analytics_auto_collection_enabled": false,
    "messaging_auto_init_enabled": false,
    "messaging_ios_auto_register_for_remote_messages": true
    }
    }
    Step4:
    Add Developer account
    //Add two Capability
    Step5:
    Add Background Modes and check
    1.Background fetch
    2.Remote Notification
    Step6:
    Add notification capability
    Step7:
    Add APNs Auth key
    key Id --------
    Team Id --------
    Upload file .p8
    Step8:
    //Install these packages
    yarn add @react-native-firebase/messaging
    yarn add @notifee/react-native
    yarn add react-native-permissions
    Step9:
    Make fcm Method helper Class
    If you like this video, Please Likes, Comments, Subscribe to support us...
    Thanks.
    Starting with React Native #codewithadnan @code with adnan

КОМЕНТАРІ • 60

  • @honamwong6781
    @honamwong6781 11 місяців тому +1

    Thanks, it is wokrking well !

  • @testdev-ut5ty
    @testdev-ut5ty 4 місяці тому +1

    this is good one

  • @Shuvajit_Maitra
    @Shuvajit_Maitra 2 місяці тому +1

    I implenemt it as you said but I am getting error when I am trying fetch token for ios
    error message : The operation couldn’t be completed. No APNS token specified before fetching FCM Token
    Android is working

  • @murilogarcia6281
    @murilogarcia6281 Рік тому +1

    To be able to develop for IOS, the issue of notification and testing, do you need to have a paid APPLE account? Because mine doesn't work, the notification part doesn't work, I can't get the token, but on Android it works normally

    • @mussadiqali1725
      @mussadiqali1725 11 місяців тому +1

      yes you must have an apple developer account

  • @nishanbaral5124
    @nishanbaral5124 9 місяців тому +1

    Bhai, thanks for the tutorial. Yehi notification agar app clip target me implement karni ho to, kese karenge ?

  • @ГеоргийСтуденикин-ч8к

    what to do with "no permission handler detected" ?
you also have this error in the video

    • @Ashish-vw3qj
      @Ashish-vw3qj Рік тому

      I also faced the same issue. But further resolve it by changing some thing in node module Files.
      In node_module go to React-native persmission then IOS -> RNPermissions.m search No permission handler detected and then and comment this line "RCTLogError(@"%@", message)".
      I hope this will resolve the issue.

  • @sreenivasreddykick4503
    @sreenivasreddykick4503 Рік тому +1

    which version of node ur using

  • @tirumalreddy3693
    @tirumalreddy3693 6 місяців тому +1

    Thank you, it's working well, Can you create a video on firebase in-app messaging for react native ios and android

  • @pilarelisii4666
    @pilarelisii4666 8 місяців тому +2

    Hi, notifications test works, but I have an error in the development build that I can't dismiss. "There was a problem loading the project" No permission handler detected. Check that you are correctly calling setup_permissions in your Podfile.

    • @haimai8158
      @haimai8158 6 місяців тому

      I have same problem. How do you fix it

  • @tytoeu7177
    @tytoeu7177 Рік тому +1

    how to config in expo project sir? please show me 🙏🙏

  • @mr.programer4918
    @mr.programer4918 Рік тому +1

    Awesome Understanding thing ❤

  • @uesleisuptitz
    @uesleisuptitz Рік тому +1

    Thanks! Helped a lot!!!

  • @Faraz-m6f
    @Faraz-m6f Рік тому +1

    animations pr bhi video bnao, full course , from beginner to PRO.

  • @TeraBaap_YT7989
    @TeraBaap_YT7989 6 місяців тому +1

    Bhai ios me setbackground handler chalraha hai apke pass app ke quit state me. Mujhe notifications aaraha hai lekin setbackgroundhandler ios app k quit state me trigger nahi horaha hai

  • @samvibes8544
    @samvibes8544 Рік тому +1

    there was error while pod install, it can be solved by adding the following script in `PodFile` under `target 'AppName' do` line script -
    pod 'Firebase', :modular_headers => true
    pod 'FirebaseCoreInternal', :modular_headers => true
    pod 'GoogleUtilities', :modular_headers => true
    pod 'FirebaseCore', :modular_headers => true

    • @BabekNagiyev
      @BabekNagiyev 6 місяців тому

      Actually you can `move use_frameworks! :linkage => :static` to right before `target 'App' do` without adding modular_headers

  • @Nuriddin_SWE
    @Nuriddin_SWE 2 місяці тому

    if that works on my ios device, i will subscribe bro

  • @djiypyk
    @djiypyk Рік тому +1

    but how create sticker notification for launcher?

  • @zlackbiro
    @zlackbiro 10 місяців тому +3

    Insane complex...

  • @JonasVanderReysen
    @JonasVanderReysen Рік тому +1

    "there's no apps in this project", and I can't add one cause I don't know what my package name is

  • @shashikumar-vi3sz
    @shashikumar-vi3sz Рік тому +1

    Do you know how to update the app badgecount when the app is closed in react native ios app?

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому

      Thanks for asking yes you can update your badge count using Notification.Push.setBadgeCount(11);

    • @shashikumar-vi3sz
      @shashikumar-vi3sz Рік тому +1

      It will help me to solve

    • @shashikumar-vi3sz
      @shashikumar-vi3sz Рік тому +1

      @@CodeWithAdnan it used when the app is open state I was asking that when it is closed or when we kill the app

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому

      @@shashikumar-vi3sz Then you should handle it on the server side and manage it using payload.

    • @shashikumar-vi3sz
      @shashikumar-vi3sz Рік тому +1

      Okay got it Thank You

  • @bhagyakrishna7528
    @bhagyakrishna7528 Рік тому +1

    Will this work on a simulator?

  • @zachkouemegni4601
    @zachkouemegni4601 8 місяців тому +1

    Allo need help please i did everything but notification never show on my device (ios) i have a paid account PLEASE HELP i'm working on a project

    • @pa30p42
      @pa30p42 7 місяців тому

      did you find a solution? stucked too. did everything as in tutorial, but not getting notifications

  • @kenha1213
    @kenha1213 Рік тому +1

    Thanks You

  • @darwin5308
    @darwin5308 Рік тому

    Hai I am using react native expo and the push notifications is working fine for 1st few minutes of login(registering token to my backend) after few minutes notification not working help me please( notification always working fine in my web application) help me struggling for a month

  • @Mik3aglin
    @Mik3aglin Рік тому +1

    Does anyone having problems with iOS?. I've tried with an emulator and it worked , but when i use my iphone i don't see the notification

  • @AZAELJIMENEZ
    @AZAELJIMENEZ Рік тому +1

    in Capabilty dont show me Push Notifications in xcode helppppppppp

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому

      Brother it’s impossible

    • @fuckwadfuckwad
      @fuckwadfuckwad Рік тому

      its already enabled by default. just scroll down in signing and capabilities

    • @fpgghos
      @fpgghos Рік тому

      because somehow this guy doesn't want you to know that you need to pay Apple Development certificate before you can have that functionality enabled in your xcode unless maybe asks him first about it?

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому

      that's wrong If i want this then why I creating this video.@@fpgghos

  • @keziayovita4163
    @keziayovita4163 Рік тому +1

    Is it possible to combine the codes with the tutorial you give for android?

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому +1

      Yes you can be use this same code for android but need to configure firebase in android

  • @JayantSolanki-u7r
    @JayantSolanki-u7r Рік тому

    firebase.h file not found

  • @xbruzdax3939
    @xbruzdax3939 Рік тому +1

    Do I need a paid apple developer account for this?

  • @sangamnayak6915
    @sangamnayak6915 Рік тому +1

    Bhai sirf IOS ke liye dikha rha hai to Android kyu likh rhkha hai

    • @CodeWithAdnan
      @CodeWithAdnan  Рік тому

      Bro apna first part dakha kia wo Android ka hi hai

  • @alieliack6494
    @alieliack6494 5 місяців тому +1

    Adnan selam Turk musun?

  • @kalaineethan8633
    @kalaineethan8633 Рік тому +1

  • @AjayBisht-n7g
    @AjayBisht-n7g 11 місяців тому +1

    i am facing 'FirebaseStorage/FirebaseStorage-Swift.h' file not found error