Search code examples
react-nativepubnub

TypeError Object is not a constructor (evaluating new_pubnubReact.default')

I am new to react native and am trying to create push notifications for android.

I am using the following tutorial from PubNub.

PubNub tutorial

When I run my app in the android studio emulator after finishing the tutorial I get the following error.

error

Not quite sure what it means of how to fix it as when I google the problem nothing comes up.

Here is my code

import React from 'react';
    import PushNotificationIOS from 'react-native';
    import PubNubReact from 'pubnub-react';

    const PushNotification = require('react-native-push-notification');

    export default class App extends React.Component {
    constructor(props) {
    super(props);
    this.pubnub = new PubNubReact({
        publishKey: 'YOUR_PUBNUB_PUBLISH_KEY_HERE',
        subscribeKey: 'YOUR_PUBNUB_SUBSCRIBE_KEY_HERE'
    });
    this.pubnub.init(this);
    PushNotification.configure({
      // Called when Token is generated.
      onRegister: function(token) {
          console.log( 'TOKEN:', token );
          if (token.os == "ios") {
            this.pubnub.push.addChannels(
            {
              channels: ['notifications'],
              device: token.token,
              pushGateway: 'apns'
            });
            // Send iOS Notification from debug console: {"pn_apns":{"aps":{"alert":"Hello World."}}}
          } else if (token.os == "android"){
            this.pubnub.push.addChannels(
            {
              channels: ['notifications'],
              device: token.token,
              pushGateway: 'gcm' // apns, gcm, mpns
            });
            // Send Android Notification from debug console: {"pn_gcm":{"data":{"message":"Hello World."}}}
          }  
      }.bind(this),
      // Something not working?
      // See: https://support.pubnub.com/support/solutions/articles/14000043605-how-can-i-troubleshoot-my-push-notification-issues-
      // Called when a remote or local notification is opened or received.
      onNotification: function(notification) {
        console.log( 'NOTIFICATION:', notification );
        // Do something with the notification.
        // Required on iOS only (see fetchCompletionHandler docs: https://reactnative.dev/docs/pushnotificationios)
        // notification.finish(PushNotificationIOS.FetchResult.NoData);
      },
      // ANDROID: GCM or FCM Sender ID
      senderID: "sender-id",
  });
}
    }

Solution

  • pubnub-react library has been completely changed in version 2.0.0. It no longers includes pubnub JavaScript SDK by default so you have to install it as well.

    Here is the link to new PubNub React repository, and in the README.md file you can find examples on how to use it.

    If you want to use the older version that is compatible with the tutorial/blog post you may be reading, please install the older version of the PubNub React SDK like so:

    $ npm install pubnub-react@1

    To summarize the changes, pubnub-react now uses Context and Hooks API to propagate PubNub instance deep into the children tree.

    Provider

    You need to include the provider somewhere top in the component tree.

    import React from 'react'
import PubNub from 'pubnub'
import { PubNubProvider } from 'pubnub-react'

const pubnub = new PubNub({}) // PubNub configuration

export const App = () => {
    return <PubNubProvider client={pubnub}>
        <Child />
    </PubNubProvider>
}

    Consumer

    To use the PubNub instance somewhere else, you can now just use the usePubNub hook.

    import { usePubNub } from 'pubnub-react'

export const Child = () => {
    const pubnub = usePubNub()
    
    return <div>I am using PubNub!</div>
}