React-native-firebase: isHeadless property not being populated while iOS is quit

Created on 21 Jul 2020 · 13Comments · Source: invertase/react-native-firebase

Issue

Hello,

I got stacked with an issue when isHeadless property is not injected while iOS is in the quit state and data message triggers the iPhone to wake up.

This leads to the following:

When I receive a message, my app is fully launched in the background
It doesn't proceed with some of the API requests when the user actually opens the app

Any help will be much appreciated

Here is my index.js:

import React from 'react'
import { AppRegistry } from 'react-native'
import App from './src/App'
import { name as appName } from './app.json'
import messaging from '@react-native-firebase/messaging'
import { processBackgroundNotification } from 'utils/notifications'

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  processBackgroundNotification(remoteMessage)
  return Promise.resolve({})
})

function HeadlessCheck({ isHeadless }) {

// ======> isHeadless is always null if data message is received in the quit state

  if (isHeadless) {
    return null
  }
  return <App />
}

AppRegistry.registerComponent(appName, () => HeadlessCheck)

Project Files

Javascript

Click To Expand

#### `package.json`:

"dependencies": {
    "@dudigital/react-native-zoomable-view": "^1.0.15",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/push-notification-ios": "^1.3.0",
    "@react-native-community/viewpager": "^4.0.1",
    "@react-native-firebase/app": "^8.2.0",
    "@react-native-firebase/messaging": "^7.4.2",
    "@react-navigation/drawer": "^5.8.4",
    "@react-navigation/native": "^5.6.1",
    "@react-navigation/stack": "^5.6.2",
    "axios": "0.19.2",
    "i18n-js": "^3.7.1",
    "lodash": "^4.17.15",
    "moment": "^2.27.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-device-info": "^5.6.1",
    "react-native-fast-image": "^8.1.5",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-localize": "^1.4.0",
    "react-native-push-notification": "^4.0.0",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.7",
    "react-native-screens": "^2.9.0",
    "react-native-share": "^3.7.0",
    "react-native-size-matters": "^0.3.0",
    "react-native-svg": "^12.1.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },

#### `firebase.json` for react-native-firebase v6:

# N/A

### iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like:

# N/A

#### `AppDelegate.m`:

// N/A

Environment

Click To Expand

**`react-native info` output:**

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 183.13 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2

- **Platform that you're experiencing the issue on**: - [ ] iOS - [ ] Android - [x] **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:** - `8.2.0` - **`Firebase` module(s) you're using that has the issue:** - `messaging` - **Are you using `TypeScript`?** - `Y, 3.8.3`

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

iOS Messaging

Source

zoftify

👍2

Most helpful comment

@mikehardy yes that's true, but it says here that the messaging module injects isHeadless into iOS for precisely this check.

andersonaddo on 21 Jul 2020

👍2

All 13 comments

There is no such thing as HeadlessJS in iOS, so it is never "headless"

https://reactnative.dev/docs/headless-js-android - note it is android only.

mikehardy on 21 Jul 2020

@mikehardy yes that's true, but it says here that the messaging module injects isHeadless into iOS for precisely this check.

andersonaddo on 21 Jul 2020

👍2

Oh dang - good catch @andersonaddo

mikehardy on 21 Jul 2020

That's exactly what I meant :)

zoftify on 21 Jul 2020

Seems we've found a temporary solution, however, there is currently an issue as the app is not getting killed after the background processing is done.
This leads to a situation when you open the app after it has processed the silent push and all you see is a white screen.

Any ideas?

function HeadlessCheck({ isHeadless }) {
  if (isHeadless) {
    return null
  }

  if (Platform.OS === 'ios' && AppState.currentState === 'background') {
    return null
  }

  return <App />
}

zoftify on 21 Jul 2020

Hey @zoftify, I've tried testing this, but my device is having a problem with accepting notifications when the app is in a quit state. Will try again at some point. If you get a chance, I'd be grateful if you could let me know if it works for you! Thanks.

russellwheatley on 13 Aug 2020

@mikehardy @andersonaddo Am confused about this. As per instructions in Cloud Messaging section, we have to do some changes in AppDelegate.m file to have this isHeadless value true. Do we still have to do this manually or it is done automatically now? When tried to follow steps mentioned in instruction, there are multiple errors thrown - method missing, and seems like there are different methods by default not as mentioned in instruction. Does anyone have any fresh example of AppDelegate.m file?

davx1992 on 25 Aug 2020

@davx1992 perhaps inspecting the actual PR will shed light? https://github.com/invertase/react-native-firebase/pull/4082/files#diff-6f72b1c2cff1b4068bcbe1ec9bfe68edR276-R295

If you are still seeing errors can you open a new issue with details and a reproducible example?

mikehardy on 25 Aug 2020

You could check out this section in the documentation which addresses how to update your AppDelegate.m file.

russellwheatley on 26 Aug 2020

Thanks all, updated my AppDelegate.m now it works.

davx1992 on 26 Aug 2020

👍1

I'm trying to input the "isHeadless" prop into my app, but the appdelegate.m part isn't working. What should i do? You can see the error in the image below. My build is failing.

I'm using react-native-firebase: 6.4.0 and react-native-firebase/messaing: 6.4.0.
Captura de Tela 2020-09-24 às 10 20 24