🔥 Background notifications not shown on iOS [v 6.7.1]

[ronneldavis]

Issue

Notifications sent to iOS don't display in the background. It works in the foreground however. The setBackgroundMessageHandler is called however no notification is displayed.

---

Project Files

Javascript

Click To Expand

package.json:

{
  "name": "Speek",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "release": "cd android && ./gradlew assembleRelease",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@babel/preset-env": "^7.9.5",
    "@monterosa/react-native-parallax-scroll": "^1.8.0",
    "@react-native-community/async-storage": "^1.9.0",
    "@react-native-community/cli-platform-android": "^2.9.0",
    "@react-native-community/cli-platform-ios": "^2.9.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-firebase/app": "^6.7.1",
    "@react-native-firebase/auth": "^6.7.1",
    "@react-native-firebase/database": "^6.7.1",
    "@react-native-firebase/firestore": "^6.7.1",
    "@react-native-firebase/messaging": "^6.7.1",
    "@react-native-firebase/storage": "^6.7.1",
    "@react-navigation/native": "^5.1.6",
    "@react-navigation/stack": "^5.2.13",
    "adb": "^0.2.0",
    "algoliasearch": "^4.2.0",
    "axios": "^0.19.2",
    "babel-preset-react-native": "5.0.1",
    "jetifier": "^1.6.5",
    "libphonenumber-js": "^1.7.50",
    "match-sorter": "^4.1.0",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-appstate-listener": "^1.0.0",
    "react-native-background-timer": "^2.2.0",
    "react-native-callkeep": "^3.0.12",
    "react-native-camera": "^3.23.1",
    "react-native-contacts": "^5.2.0",
    "react-native-dark-mode": "^0.2.2",
    "react-native-draggable": "^3.1.0",
    "react-native-flash-message": "^0.1.15",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-image-picker": "^2.3.1",
    "react-native-image-resizer": "^1.2.1",
    "react-native-incall-manager": "^3.2.7",
    "react-native-interactable": "^2.0.1",
    "react-native-invoke-app": "^1.0.4",
    "react-native-material-ripple": "^0.9.1",
    "react-native-neomorph-shadows": "0.0.8",
    "react-native-otp-inputs": "^5.0.1",
    "react-native-phone-input": "^0.2.4",
    "react-native-reanimated": "^1.8.0",
    "react-native-responsive-fontsize": "^0.4.3",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.6.0",
    "react-native-share": "^3.3.0",
    "react-native-sound-level": "^1.1.5",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webrtc": "^1.75.3",
    "react-navigation-shared-element": "^5.0.0-alpha1",
    "rn-fetch-blob": "^0.12.0",
    "uuid": "^7.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^0.0.7",
    "@types/jest": "^25.2.1",
    "@types/react": "^16.9.34",
    "@types/react-native": "^0.62.4",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^25.4.0",
    "eslint": "^6.8.0",
    "jest": "^25.4.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0",
    "typescript": "^3.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

firebase.json for react-native-firebase v6:

{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  }
}

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Speek' do
  # Pods for Speek
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
  pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
  pod 'RNFBMessaging', :path => '../node_modules/@react-native-firebase/messaging'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'Interactable', :path => '../node_modules/react-native-interactable'
  pod 'react-native-contacts', :path => '../node_modules/react-native-contacts'

  target 'SpeekTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'Speek-tvOS' do
  # Pods for Speek-tvOS

  target 'Speek-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

AppDelegate.m:

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * 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 <PushKit/PushKit.h>
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>
#import <UserNotifications/UserNotifications.h>
#import <RNCallKeep.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Speek"
                                            initialProperties:nil];

  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];
  
  [FIRApp configure];
  
  
  [application registerForRemoteNotifications];
  
    UNAuthorizationOptions authOptions = UNAuthorizationOptionAlert |
        UNAuthorizationOptionSound | UNAuthorizationOptionBadge;
    [[UNUserNotificationCenter currentNotificationCenter]
        requestAuthorizationWithOptions:authOptions
        completionHandler:^(BOOL granted, NSError * _Nullable error) {
          // ...
        }];
  [UNUserNotificationCenter currentNotificationCenter].delegate = self;

  
  return YES;
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
  printf("NATIVE: RECEIVED NOTI");
  completionHandler(UIBackgroundFetchResultNewData);
}

- (UIInterfaceOrientationMask) application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
        // iPad
        return UIInterfaceOrientationMaskAll;
    } else {
        // iPhone / iPod Touch
        return UIInterfaceOrientationMaskPortrait;
    }
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
  #if DEBUG
    NSURL *jsUrl = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    [[RCTBundleURLProvider sharedSettings] setJsLocation:jsUrl.host];
    return jsUrl;
  #else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif
}

@end

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

// N/A

android/app/build.gradle:

// N/A

android/settings.gradle:

// N/A

MainApplication.java:

// N/A

AndroidManifest.xml:

<!-- N/A -->

---

Environment

Click To Expand

react-native info output:

 OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 58.02 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native-cli: 2.0.1

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • 6.7.1
• Firebase module(s) you're using that has the issue:
  • Messaging
• Are you using TypeScript?
  • No

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[russellwheatley]

Hey @ronneldavis, I don't know if you noticed, but there is already an issue open (#3530) for this problem if you'd like to head over there and keep it in one thread. Thank you.