Push Notifications in React-Native with FireBase

gistfile1.md

1. Add new App in Firebase Console, select iOS and follow exactly instruction. 1a. In the GoogleService-Info.plist step, after download the file, open xCode, in Project Navigator right click Supporting folder and select Add files to ... then select the downloaded file.
2. Following this to create App Id, APNs (.p8) and Provisioning Profile for iOS: https://firebase.google.com/docs/cloud-messaging/ios/certs 2a. Add APN file (.p8) to Firebase App
3. Edit Podfile, add following below pod 'Firebase/Core': pod 'Firebase/Messaging' then $ pod install again
4. Install react-native-fcm module then rnpm link react-native-fcm
5. Following this https://github.com/evollu/react-native-fcm#shared-steps and this https://github.com/evollu/react-native-fcm#xcode-post-installation-steps
6. Write Component to handle Push Notifications:

# main.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import PushNotification from "./PushNotification";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <PushNotification />
        <Text style={styles.welcome}>
          Welcome to Push Notification for React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});



# PushNotification.js
import React, { Component } from "react";

import { Platform } from 'react-native';

import FCM, {FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType} from "react-native-fcm";

export default class PushNotificationController extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    FCM.requestPermissions();

    FCM.getFCMToken().then(token => {
      console.log("TOKEN (getFCMToken)", token);
    });

    FCM.getInitialNotification().then(notif => {
      console.log("INITIAL NOTIFICATION", notif)
    });

    this.notificationListner = FCM.on(FCMEvent.Notification, notif => {
      console.log("Notification", notif);
      if(notif.local_notification){
        return;
      }
      if(notif.opened_from_tray){
        return;
      }

      if(Platform.OS ==='ios'){
              //optional
              //iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link.
              //This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override
              //notif._notificationType is available for iOS platfrom
              switch(notif._notificationType){
                case NotificationType.Remote:
                  notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed
                  break;
                case NotificationType.NotificationResponse:
                  notif.finish();
                  break;
                case NotificationType.WillPresent:
                  notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None
                  break;
              }
            }
      this.showLocalNotification(notif);
    });

    this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => {
      console.log("TOKEN (refreshUnsubscribe)", token);
    });
  }

  showLocalNotification(notif) {
    FCM.presentLocalNotification({
      title: notif.title,
      body: notif.body,
      priority: "high",
      click_action: notif.click_action,
      show_in_foreground: true,
      local: true
    });
  }

  componentWillUnmount() {
    this.notificationListner.remove();
    this.refreshTokenListener.remove();
  }


  render() {
    return null;
  }
}

7. Goes to Notifications in Firebase to send notifications to device.

Trouble Shooting:

1. RNFIRMessaging.h not found: Select the error project then make following changes
   • Disable Parallelize Build in the project schema, Add React to the top of targets list (Optional)
   • Set Always Search User Paths true
   • Clear everything in Build Settings > Header Search and add "$(SRCROOT)/../../../ios/Pods/Headers/Public" with recursive

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_RNFIRMessaging", referenced from:
      objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

• The module of RNFIRMessaging was not found in Libraries folder, run react-native link or rnpm link <module name> or add manually

3. React/RCTDefines.h not found

• Select the error target > Build Settings > Header Search > Remove all values related to React from node_modules
• Edit the target schema > Build > disable Parallelize build and add React on top of Targets

4. RCTBrideModule.h or whatever using React/.... is not found, then add following this to Header Search of the project: "$(SRCROOT)/../../../ios/Pods/Headers/Public". Remember correct the relative url, SRCROOT is where the xcode project is

<key>NSCameraUsageDescription</key>
<string>The app would like to let you make a picture.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>The app would like to let you choose an item from your Photos.</string>