React-native-firebase: _firebase2.default.messaging(...).hasPermission is not a function

Created on 29 Jul 2018 · 2Comments · Source: invertase/react-native-firebase

Environment

Xcode Version : 9.4.1
Development Operating System: macOS High Sierra
Application Target Platform: iPhone 6
React Native version: 0.55.4
React Native Firebase Version: 4.3.8
Firebase module: Messaging

Issue

React Native build is failing in js console with TypeError: _firebase2.default.messaging(...).hasPermission is not a function. The app builds successfully in x-code and with react-native run-ios and Metro bundler loads successfully. I'm wondering if it's an issue of mismatched versions, but based on the documentation I think that should be fine.

I've removed and reinstalled node_modules, relinked react-native-firebase, and run pod update after removing Pods folder.

Saw this similarly named issue https://github.com/invertase/react-native-firebase/issues/1334 but looks to be unrelated.

Relevant js:

App.js:

...
import firebase from "./config/firebase.js";
import '@firebase/messaging';

class App extends React.Component {
    constructor() {
        ...
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                firebase.messaging().hasPermission()
...

config/firebase.js:

import * as firebase from 'firebase';
import { 
    FIREBASE_API_KEY, 
    FIREBASE_AUTH_DOMAIN, 
    FIREBASE_DATABASE_URL, 
    FIREBASE_PROJECT_ID, 
    FIREBASE_STORAGE_BUCKET, 
    FIREBASE_MESSAGING_SENDER_ID 
} from "./constants.js";

var config = {
    apiKey: FIREBASE_API_KEY,
    authDomain: FIREBASE_AUTH_DOMAIN,
    databaseURL: FIREBASE_DATABASE_URL,
    projectId: FIREBASE_PROJECT_ID,
    storageBucket: FIREBASE_STORAGE_BUCKET,
    messagingSenderId: FIREBASE_MESSAGING_SENDER_ID
};

firebase.initializeApp(config);

export default firebase;

Podfile:

target 'hospitalApp' do

  # Pods for hospitalApp
  pod 'Firebase/Core'
  pod 'Firebase/Database'
  pod 'Firebase/Messaging'

  target 'hospitalAppTests' do
    inherit! :search_paths
  end

end

target 'hospitalApp-tvOS' do

  target 'hospitalApp-tvOSTests' do
    inherit! :search_paths
  end

end

Podfile.lock

PODS:
  - Firebase/Core (5.4.1):
    - Firebase/CoreOnly
    - FirebaseAnalytics (= 5.0.1)
  - Firebase/CoreOnly (5.4.1):
    - FirebaseCore (= 5.0.6)
  - Firebase/Database (5.4.1):
    - Firebase/CoreOnly
    - FirebaseDatabase (= 5.0.2)
  - Firebase/Messaging (5.4.1):
    - Firebase/CoreOnly
    - FirebaseMessaging (= 3.0.3)
  - FirebaseAnalytics (5.0.1):
    - FirebaseCore (~> 5.0)
    - FirebaseInstanceID (~> 3.0)
    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
    - nanopb (~> 0.3)
  - FirebaseCore (5.0.6):
    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
  - FirebaseDatabase (5.0.2):
    - FirebaseCore (~> 5.0)
    - leveldb-library (~> 1.18)
  - FirebaseInstanceID (3.1.1):
    - FirebaseCore (~> 5.0)
  - FirebaseMessaging (3.0.3):
    - FirebaseCore (~> 5.0)
    - FirebaseInstanceID (~> 3.0)
    - GoogleToolboxForMac/Logger (~> 2.1)
    - Protobuf (~> 3.1)
  - GoogleToolboxForMac/Defines (2.1.4)
  - GoogleToolboxForMac/Logger (2.1.4):
    - GoogleToolboxForMac/Defines (= 2.1.4)
  - "GoogleToolboxForMac/NSData+zlib (2.1.4)":
    - GoogleToolboxForMac/Defines (= 2.1.4)
  - leveldb-library (1.20)
  - nanopb (0.3.8):
    - nanopb/decode (= 0.3.8)
    - nanopb/encode (= 0.3.8)
  - nanopb/decode (0.3.8)
  - nanopb/encode (0.3.8)
  - Protobuf (3.6.0)

...

Appdelegate.m:

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>
#import "RNFirebaseMessaging.h"
#import "RNFirebaseNotifications.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
  [RNFirebaseNotifications configure];
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"hospitalApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  // add before return YES;
  [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
  return YES;
}

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
  [[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {
  [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];
}


@end

package.json:

{
  "name": "hospitalApp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest-expo": "23.0.0",
    "react-test-renderer": "16.0.0"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-core": "^6.26.0",
    "firebase": "^4.9.1",
    "fs": "0.0.1-security",
    "md5": "^2.2.1",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-autogrow-textinput": "^5.0.0",
    "react-native-checkbox": "^2.0.0",
    "react-native-elements": "^0.18.5",
    "react-native-firebase": "^4.3.8",
    "react-native-flexi-radio-button": "^0.2.2",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-modal": "^4.1.1",
    "react-native-push-notification": "^3.0.2",
    "react-native-tab-view": "^0.0.74",
    "react-native-tabs": "^1.0.9",
    "react-native-vector-icons": "^4.4.3",
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.6",
    "react-timer-mixin": "^0.13.3",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "uuid": "^3.2.1"
  }
}

JavaScript iOS Messaging Question

Source

laurachevalier4

All 2 comments

@laurachevalier4 welcome 🎉

Looks like you're importing the official Firebase JS SDK rather than this library:

import * as firebase from 'firebase';
// should instead be
import firebase from 'react-native-firebase';

Also; you you can remove initializeApp and it's config for the default firebase app; if you've setup the GoogleService-Info.plist(iOS) and google-services.json(Android) files then the default firebase app will already be there pre-initialized and ready to go.

initializeApp is purely for creating additional apps on react-native-firebase.

References:

Hope that helps

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below: