invertase / react-native-firebase

🔥 A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
https://rnfirebase.io
Other
11.53k stars 2.18k forks source link

[🐛] getInitialNotification is not working on Android #5199

Closed alisivgin closed 3 years ago

alisivgin commented 3 years ago

Issue

Describe your issue here

Hi everyone, I use cloud messaging in order to get Notifications using FCM. I also use react-native-bootsplash to have a splash screen after seeing this comment https://github.com/crazycodeboy/react-native-splash-screen/issues/289#issuecomment-502406454. However the issue has not been resolved. getInitialNotification is firing but it returns remoteMessage as null. I followed all the steps that is described in documentation.

Project Files

Javascript

Click To Expand

#### `package.json`: ```json { "name": "wicow", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "pod": "npx pod-install", "postinstall": "patch-package" }, "dependencies": { "@notifee/react-native": "^1.4.0", "@react-native-community/async-storage": "^1.12.1", "@react-native-community/masked-view": "^0.1.10", "@react-native-firebase/app": "^11.2.0", "@react-native-firebase/messaging": "^11.2.0", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.4", "axios": "^0.21.1", "react": "17.0.1", "react-native": "0.64.0", "react-native-bootsplash": "3.1.2", "react-native-device-info": "^8.1.0", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.1.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.1.0", "react-native-webview": "^11.4.0", "react-redux": "^7.2.3", "redux": "^4.0.5", "redux-saga": "^1.1.3", "patch-package": "^6.2.2", "postinstall-postinstall": "^2.1.0" }, "devDependencies": { "@babel/core": "^7.13.15", "@babel/runtime": "^7.13.10", "@react-native-community/eslint-config": "^2.0.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.3", "eslint": "^7.24.0", "eslint-plugin-import": "^2.22.1", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.65.2", "react-native-flipper": "^0.84.0", "react-test-renderer": "17.0.1", "redux-flipper": "^1.4.2" }, "jest": { "preset": "react-native" } } ``` #### ```js yield messaging() .getInitialNotification() .then(remoteMessage => { console.log(remoteMessage); if (remoteMessage) { console.log( "Notification caused app to open from quit state:", remoteMessage.notification, ); } }); ``` `remoteMessage` returns `null`.

Android

Click To Expand

#### Have you converted to AndroidX? - [ ] my application is an AndroidX application? - [x] 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`: ```groovy buildscript { ext { buildToolsVersion = "29.0.3" minSdkVersion = 21 compileSdkVersion = 29 targetSdkVersion = 29 ndkVersion = "20.1.5948944" } repositories { google() jcenter() } dependencies { classpath("com.android.tools.build:gradle:4.1.0") classpath 'com.google.gms:google-services:4.3.4' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { mavenLocal() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url("$rootDir/../node_modules/react-native/android") } maven { // Android JSC is installed from npm url("$rootDir/../node_modules/jsc-android/dist") } google() jcenter() maven { url 'https://www.jitpack.io' } } } ``` #### `android/app/build.gradle`: ```groovy apply plugin: "com.android.application" apply plugin: 'com.google.gms.google-services' import com.android.build.OutputFile /** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets). * These basically call `react-native bundle` with the correct arguments during the Android build * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle * bundleAssetName: "index.android.bundle", * * // the entry file for bundle generation. If none specified and * // "index.android.js" exists, it will be used. Otherwise "index.js" is * // default. Can be overridden with ENTRY_FILE environment variable. * entryFile: "index.android.js", * * // https://reactnative.dev/docs/performance#enable-the-ram-format * bundleCommand: "ram-bundle", * * // whether to bundle JS and assets in debug mode * bundleInDebug: false, * * // whether to bundle JS and assets in release mode * bundleInRelease: true, * * // whether to bundle JS and assets in another build variant (if configured). * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants * // The configuration property can be in the following formats * // 'bundleIn${productFlavor}${buildType}' * // 'bundleIn${buildType}' * // bundleInFreeDebug: true, * // bundleInPaidRelease: true, * // bundleInBeta: true, * * // whether to disable dev mode in custom build variants (by default only disabled in release) * // for example: to disable dev mode in the staging build type (if configured) * devDisabledInStaging: true, * // The configuration property can be in the following formats * // 'devDisabledIn${productFlavor}${buildType}' * // 'devDisabledIn${buildType}' * * // the root of your project, i.e. where "package.json" lives * root: "../../", * * // where to put the JS bundle asset in debug mode * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", * * // where to put the JS bundle asset in release mode * jsBundleDirRelease: "$buildDir/intermediates/assets/release", * * // where to put drawable resources / React Native assets, e.g. the ones you use via * // require('./image.png')), in debug mode * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", * * // where to put drawable resources / React Native assets, e.g. the ones you use via * // require('./image.png')), in release mode * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", * * // by default the gradle tasks are skipped if none of the JS files or assets change; this means * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to * // date; if you have any other folders that you want to ignore for performance reasons (gradle * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ * // for example, you might want to remove it from here. * inputExcludes: ["android/**", "ios/**"], * * // override which node gets called and with what additional arguments * nodeExecutableAndArgs: ["node"], * * // supply additional arguments to the packager * extraPackagerArgs: [] * ] */ project.ext.react = [ enableHermes: false, // clean and rebuild if changing ] apply from: "../../node_modules/react-native/react.gradle" /** * Set this to true to create two separate APKs instead of one: * - An APK that only works on ARM devices * - An APK that only works on x86 devices * The advantage is the size of the APK is reduced by about 4MB. * Upload all the APKs to the Play Store and people will download * the correct one based on the CPU architecture of their device. */ def enableSeparateBuildPerCPUArchitecture = false /** * Run Proguard to shrink the Java bytecode in release builds. */ def enableProguardInReleaseBuilds = false /** * The preferred build flavor of JavaScriptCore. * * For example, to use the international variant, you can use: * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` * * The international variant includes ICU i18n library and necessary data * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that * give correct results when using with locales other than en-US. Note that * this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+' /** * Whether to enable the Hermes VM. * * This should be set on project.ext.react and mirrored here. If it is not set * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode * and the benefits of using Hermes will therefore be sharply reduced. */ def enableHermes = project.ext.react.get("enableHermes", false); android { ndkVersion rootProject.ext.ndkVersion compileSdkVersion rootProject.ext.compileSdkVersion compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { applicationId "com.basestech.wicow" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" } } signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } } buildTypes { debug { signingConfig signingConfigs.debug } release { // Caution! In production, you need to generate your own keystore file. // see https://reactnative.dev/docs/signed-apk-android. signingConfig signingConfigs.debug minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } // applicationVariants are e.g. debug, release applicationVariants.all { variant -> variant.outputs.each { output -> // For each separate APK per architecture, set a unique version code as described here: // https://developer.android.com/studio/build/configure-apk-splits.html // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] def abi = output.getFilter(OutputFile.ABI) if (abi != null) { // null for the universal-debug, universal-release variants output.versionCodeOverride = defaultConfig.versionCode * 1000 + versionCodes.get(abi) } } } } dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion implementation "com.facebook.react:react-native:+" // From node_modules implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { exclude group:'com.facebook.fbjni' } debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' exclude group:'com.squareup.okhttp3', module:'okhttp' } debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { exclude group:'com.facebook.flipper' } if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor } } // Run this once to be able to run the application with BUCK // puts all compile dependencies into folder libs for BUCK to use task copyDownloadableDepsToLibs(type: Copy) { from configurations.compile into 'libs' } apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) ``` #### `android/settings.gradle`: ```groovy rootProject.name = 'wicow' apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' ``` #### `MainApplicaty.java`: ```java package com.basestech.wicow; import android.os.Bundle; import com.facebook.react.ReactActivity; import com.zoontek.rnbootsplash.RNBootSplash; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "wicow"; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); RNBootSplash.init(R.drawable.bootsplash, MainActivity.this); } } ``` #### `MainApplication.java`: ```java package com.basestech.wicow; import android.app.Application; import android.content.Context; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.soloader.SoLoader; import java.lang.reflect.InvocationTargetException; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); return packages; } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } /** * Loads Flipper in React Native templates. Call this in the onCreate method with something like * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); * * @param context * @param reactInstanceManager */ private static void initializeFlipper( Context context, ReactInstanceManager reactInstanceManager) { if (BuildConfig.DEBUG) { try { /* We use reflection here to pick up the class that initializes Flipper, since Flipper library is not available in release mode */ Class aClass = Class.forName("com.basestech.wicow.ReactNativeFlipper"); aClass .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) .invoke(null, context, reactInstanceManager); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } } } } ``` #### `AndroidManifest.xml`: ```xml ```


Environment

Click To Expand

**`react-native info` output:** ``` OUTPUT GOES HERE ``` - **Platform that you're experiencing the issue on**: - [ ] iOS - [x] Android - [ ] **iOS** but have not tested behavior on Android - [x] **Android** but have not tested behavior on iOS - [ ] Both - **`react-native-firebase` version you're using that has this issue:** - `11.2.0` - **`Firebase` module(s) you're using that has the issue:** - `@react-native-firebase/messaging` - **Are you using `TypeScript`?** - `N`


mikehardy commented 3 years ago

Hi there! This may not offer a great deal of comfort as it is from a different package, but with Notifee at least getInitialNotification is definitely working with the current version of react-native-bootsplash - that's the integration I can reproduce in my current app - I tested it just now in a dev build


 LOG  2021-04-21T17:52:27.470Z NotificationStore::startup - notifee initial notification: {
  "pressAction": {
    "launchActivity": "default",
    "launchActivityFlags": [
      1
    ],
    "id": "default"
  },
  "notification": {
    "data": {},
    "body": "no contents provided",
    "title": "Dev Notice: background task - BackgroundFetch",
    "id": "JeObRGH8Tf9kQ89pz3Xj",
    "android": {
      "importance": 3,
      "visibility": 0,
      "groupSummary": false,
      "channelId": "DebugChannel",
      "pressAction": {
        "launchActivity": "default",
        "launchActivityFlags": [
          1
        ],
        "id": "default"
      },
      "defaults": [
        -1
      ],
      "showChronometer": false,
      "onlyAlertOnce": false,
      "smallIcon": "drawable/minilogo_bw",
      "localOnly": false,
      "badgeIconType": 2,
      "showTimestamp": false,
      "colorized": false,
      "autoCancel": true,
      "ongoing": false,
      "chronometerDirection": "up",
      "circularLargeIcon": false,
      "asForegroundService": false,
      "groupAlertBehavior": 0
    }
  }
}

That's the output when tapping on a notification on android after flinging the app away on the app history screen on Android 10, while a notification existed, using this code (installed prior to mounting the App element)


    notifee
      .getInitialNotification()
      .then((notification) => {
        if (notification !== undefined && notification !== null) {
          console.log(
            `NotificationStore::startup - notifee initial notification: ${JSON.stringify(
              notification,
              null,
              2
            )}`
          );
          NotificationStore.initialNotification = notification.notification;
          this.trigger();
          EventStreamService.logEvent('NOTIFICATION_OPEN_INITIAL', UserStore.getUser()?.kullkiId);
        }
      })
      .catch((err) => console.log('NotificationStore::startup - getInitialNotification error', err))
      .finally(() => console.log('NotificationStore::startup async notification fetch finished.'));

No, that's not react-native-firebase but it at least proves the splash screen from react-native-boot-splash should not be messing up the Intent handling like react-native-splash-screen does, if integrated properly

Without a reproduction on your code I'm not sure what is happening though, and react-native-firebase does not support producing notifications so I'm not sure the best way to go about doing a reproduction. Notifee at least is free for debug builds so it could be installed into a minimal reproduction / fully self-contained App.js (perhaps built from https://github.com/mikehardy/rnfbdemo/blob/master/make-demo.sh) to test it.

But I'm guessing there is something project-specific happening...

alisivgin commented 3 years ago

thank you for your reply @mikehardy. I was trying to call getInitialNotification() outside of the react lifecycle. It was mentioned and I have missed that part in the documentation:

The call to getInitialNotification should happen within a React lifecycle method
after mounting (e.g. componentDidMount or useEffect). If it's called too soon
(e.g. within a class constructor or global scope),
the notification data may not be available.

For those use react-navigation I have called the method onReady function of NavigationContainer

<NavigationContainer
    onReady={() => {
        messaging()
            .getInitialNotification()
            .then(async notification => {
               // handle notification
            });
    }}>
    <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
            headerShown: false,
        }}>
        <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
</NavigationContainer>

It works as expected now.

billnbell commented 1 year ago

Did you do it after .hide() or before?

      BootSplash.hide({ fade: true });
      getInitial();