React-native-notifee: null is not an object (evaluating 'this.native')

[flaviogranero]

Hey guys,

I'm following the installation instructions, just adding the @notifee/react-native dependency and using autolink, but I'm seeing an issue.

For every call to notifee.requestPermission, notifee.createChannel or notifee.displayNotification I see the error:

null is not an object (evaluating 'this.native')

Am I missing something?

My current behaviour is react-native 0.63.2 in a monorepo structure.
I run in iOS simulator and in Android real device. In android notifee.requestPermission returns a value.

[mikehardy]

Usually this is missing pod install, but without knowing what platform you see the problem on it is hard to say

[flaviogranero]

Hi @mikehardy, thank for replying.

I just run pod install again to make sure, but I don't think that's the issue, as I'm seeing the same error in Android.

What platform info you need?
I'm running a MacOS 10.15.7, TypeScript 3.9.7, redux and calling the notifee APIs inside a redux-saga function.

[mikehardy]

Something is wrong with the autolinking somehow, I don't reproduce this and I have a test rig where I try: https://github.com/mikehardy/rnfbdemo/blob/master/notifee-demo.sh

[flaviogranero]

Do you think it can be related with monorepo? Both react-native and @notifee are being installed in root node_modules, while the project is in packages/mobile folder. I'm not seeing any other autolink issues, but perhaps it's something that should be addressed.
Do you have instructions for manual linking?

[mikehardy]

@flaviogranero 🤔 it could be the monorepo, I too use a monorepo but I have these installed in the leaf package node_modules (i.e. packages/mobile/node_modules/@notifee/react-native would have notifee's installation) - I'm not sure how react-native auto-linking handles monorepos as I have not tried it, my react-native modules are all in that leaf package

[flaviogranero]

@mikehardy I'm afraid it's not the issue. I think it's something related with the typescript compilation settings. Let me explain:

When I go to NotifeeApiModule and replace the code this.native.* by NativeModules["NotifeeApiModule"] it just works fine. I think for some reason, the code generated in dist folder cannot access this.native defined in a parent class NotifeeNativeModule. Does it make any sense?

[mikehardy]

Strange though, I use typescript in my work project. I won't be able to untangle this without a minimal reproduction I don't think

[flaviogranero]

Hey @mikehardy I figured out the issue. The problem is I was calling the notifee methods in a redux-saga call method, and by default it changes the context.
As notifee exports an NotifyApiModule instance, the internal calls to this stops working. When I do the same in a button press handler for instance, it works fine.
I'm using a workaround in redux-saga to keep the notifee instance context, but perhaps it's a good idea to convert the NotifyApiModule functions to arrow functions, in order to avoid that.

export default class NotifeeApiModule extends NotifeeNativeModule implements Module {
  public getTriggerNotificationIds = (): Promise<string[]> => {
    return this.native.getTriggerNotificationIds();
  }

[mikehardy]

Ah, the good ol' javascript this binding problem :-) ! Subtle, good find

I think we could be open to the arrow function suggestion - @helenaford / @Salakar what do you think - it's a quick "language lawyer" question you probably have an opinion on

@flaviogranero have you tried locally patching it notifee to see if that also works for you? patch-package is the way to go to give it a shot while keeping that change easy to manage https://github.com/ds300/patch-package if you have not seen it

[mikehardy]

@flaviogranero discussed internally and conversion to arrow functions would be a good change - if you want this quickly (should be easy? may be easy?) post a PR here and we can merge it and release, otherwise it will go in the queue for the next work timeslice here

[helenaford]

@flaviogranero p/r is up. thanks for finding the source of the issue. :-)