Push Notification using React Native and Firebase – Part 2

Welcome to second part of Push Notification using React Native and Firebase. If you have directly landed on this place, make sure you go through the first part here http://calsob.in/push-notification-using-react-native-and-firebase-part-1/. In this part we will learn how to make FCM (Firebase Cloud Messaging) work with APNS ( Apple Push Notification Service) and also set up things in XCode for Push notification to work with react native.

First we need to go to Firebase Console (https://console.firebase.google.com/) and create a new Project by clicking ‘Add Project’ button, entering Project Name, selecting country and finally clicking ‘Create Project’ button. In the next screen which we get, we need to click “Add Firebase to your IOS app” link to create an app. In the pop up which we get we have to enter the bundle id of the IOS Project that we created in first part of tutorial and click on ‘Register App’ button. Now, we will get a screen with option to download ‘GoogleService-Info.plist’ . We need to download the .plist file and drag it to Root of IOS app (,just above info.plist ). Make sure that ‘Copy items if needed’ check-box is checked.

Next, go to developer apple account and create the Authentication key and save it to your computer at a safe place( and make sure you remember that place to use the file later).

Next, create the App ID for the IOS App in developer apple account and make sure you check the ‘push notification’ check box before clicking continue button.

Now, create a provisioning profile for the IOS app, download the provisioning file and double click it to install it in XCode.

Next, turn on the Capabilities in XCode. We need to turn on ‘Push Notifications’, ‘Keychain Sharing’ and ‘Background Modes’ with ‘Background fetch’ and ‘Remote notifications’ checked.

Lastly, we need to upload the key that we created in apple developer account and saved in safe place. We need to upload it to Firebase console under cloud messaging app.

The above steps won’t be clear if you don’t watch the video below this article. In the video , I have performed all the steps one by one practically.

Thank you so much for checking out the article and make sure to subscribe, to stay tuned for the next part of article. Have a nice day!