zoho / SalesIQ-Mobilisten-ReactNative

Your mobile app's ideal live chat partner. Power up your mobile App with the SalesIQ Mobilisten SDK for React-Native.
https://mobilisten.io/
8 stars 12 forks source link

[Expo] : Invariant Violation: `new NativeEventEmitter()` requires a non-null argument #73

Open cmcWebCode40 opened 1 year ago

cmcWebCode40 commented 1 year ago

I'm currently having this error trying to use this package in my react native expo-dev-client app,

my Code :

import { Platform } from 'react-native';
import { ZohoSalesIQ } from 'react-native-zohosalesiq-mobilisten';

var appKey;
var accessKey;

if (Platform.OS === 'ios') {
  appKey = "....";
  accessKey = "...";
} else {
  appKey = "....";
  accessKey = "....";
}

ZohoSalesIQ.initWithCallback(appKey, accessKey, (success: any) => {
  if (success) {
    ZohoSalesIQ.setLauncherVisibility(true);
    // To show the default live chat launcher, you can use the setLauncherVisibility API. 
    // Alternatively, you may use the 'Avail floating chat button for your app' option under Settings → Brands → Installation → Android/iOS.
  } else {
    // your code to handle initialization failure
  }
});
Invariant Violation: `new NativeEventEmitter()` requires a non-null argument., js engine: hermes 

here is a screenshot of this error:

Screenshot 2023-09-13 at 13 48 36

From my findings, I suspect it could be an issue related to the newer version of the RN > 0.65.0 as mentioned in this issue #2297

I would appreciate any help to fix this issue as it is a blocker for me at the moment.

package versions

"expo": "~48.0.11", "react-native": "0.71.8", "react-native-zohosalesiq-mobilisten": "^6.1.0",

Eliost commented 1 year ago

Same error on expo go WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. WARN new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.

I can't start my app. To date I haven't found any solutions, even after looking at all the different posts on this subject.

ubaidkolad commented 1 year ago

Any update on this? Facing same issue. I made a seperate expo module for this. It works fine with standalone module but doesn't work with the expo app.

cmcWebCode40 commented 1 year ago

Same error on expo go WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. WARN new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.

I can't start my app. To date I haven't found any solutions, even after looking at all the different posts on this subject.

I guess, I will try to run thus using expo development build .

ubaidkolad commented 1 year ago

Same error on expo go WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. WARN new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.

I can't start my app. To date I haven't found any solutions, even after looking at all the different posts on this subject.

I guess, I will try to run thus using expo development build .

I did this. Still same error. It doesn't install the RNZohoSalesIQ pod properly on iOS. I tried making a custom plugin and it worked but doesn't work when imported in the expo app.

I think expo custom config can do the thing but it will need a alot of configurations.

cmcWebCode40 commented 1 year ago

Same error on expo go WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. WARN new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.

I can't start my app. To date I haven't found any solutions, even after looking at all the different posts on this subject.

I guess, I will try to run thus using expo development build .

I did this. Still same error. It doesn't install the RNZohoSalesIQ pod properly on iOS. I tried making a custom plugin and it worked but doesn't work when imported in the expo app.

I think expo custom config can do the thing but it will need a alot of configurations.

@ubaidkolad if you dont mind, can you share your custom plugin that worked ?, may that could help even further using expo. prebuild

ubaidkolad commented 1 year ago

I actually have it on my private repo. But I did not do any extra configurations. I just created an expo module and installed Zoho Plugin and did some changes as per the docs. and it worked as a standalone app using expo run:ios. I think I should try with expo prebuild and see if we can achieve this.

ubaidkolad commented 1 year ago

@cmcWebCode40 - someone here 46 achieved it using custom config.

ubaidkolad commented 1 year ago

I'm starting to write a new custom config using this doc here - https://docs.expo.dev/versions/latest/sdk/build-properties/

I think this should do it. I'll share the update if it works or not.

cmcWebCode40 commented 1 year ago

@ubaidkolad ,

I attempted using a React Native CLI project where I had to make modifications to the native code for ios PodFile. and android build.gradle (as stated in their documentation) .

However, our current project relies on Expo. To address this challenge, I've come to realize that creating a custom Expo plugin is the most effective approach. This custom plugin will automatically generate the necessary native code during the build process.

how can i get help or guidance to write this custom plugin ?

Eliost commented 1 year ago

I would add that I only get this error under expo 49, so I downgraded the version to 48 while a real correction is made. This is since they modified the AddListener and RemoveListener methods, I have the impression that some libraries have not yet taken this modification into account.

cmcWebCode40 commented 1 year ago

@Eliost ,

does this work for you on expo 48 using a development ? without any errors on ios and android ?

ubaidkolad commented 1 year ago

@cmcWebCode40 - I was able to integrate the plugin easily using expo-build-properties. Add this code to your app.json, rebuild the dev client and you are good to go!

[
        "expo-build-properties",
        {
          "android": {},
          "android": {
            "extraMavenRepos": ["https://maven.zohodl.com"]
          },
          "ios": {
            "useFrameworks": "static",
            "extraPods": [
              {
                "name": "RNZohoSalesIQ",
                "path": "../node_modules/react-native-zohosalesiq-mobilisten/ios"
              }
            ]
          }
        }
      ]
Eliost commented 1 year ago

@cmcWebCode40 Yes, on expo GO with expo 48, it works well on my side and as soon as I switch to 49, it no longer works. I have a big application, I never tested on IOS but on Android, I got the bug from expo 49.

here is my json package:

"dependencies": { "@expo/metro-config": "^0.10.7", "@react-native-async-storage/async-storage": "1.17.11", "@react-native-clipboard/clipboard": "^1.11.2", "@react-native-community/cli-platform-android": "^11.3.6", "@react-native-community/datetimepicker": "6.7.3", "@react-native-community/netinfo": "9.3.7", "@react-native-firebase/app": "^18.4.0", "@react-native-picker/picker": "2.4.8", "@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/core": "^6.1.0", "@react-navigation/drawer": "^6.1.8", "@react-navigation/elements": "^1.2.1", "@react-navigation/material-bottom-tabs": "^6.0.9", "@react-navigation/native": "^6.0.6", "@react-navigation/native-stack": "^6.2.4", "@react-navigation/stack": "^6.0.11", "axios": "^1.5.0", "buffer": "^6.0.3", "core-js": "^3.26.1", "date-and-time": "^2.3.0", "expo": "^48.0.20", "expo-application": "~5.1.1", "expo-av": "~13.2.1", "expo-background-fetch": "~11.1.1", "expo-barcode-scanner": "~12.3.2", "expo-calendar": "~11.1.1", "expo-camera": "~13.2.1", "expo-constants": "~14.2.1", "expo-dev-client": "~2.2.1", "expo-device": "~5.2.1", "expo-document-picker": "~11.2.2", "expo-file-system": "~15.2.2", "expo-intent-launcher": "~10.5.2", "expo-keep-awake": "~12.0.1", "expo-linear-gradient": "~12.1.2", "expo-location": "~15.1.1", "expo-media-library": "~15.2.3", "expo-network": "~5.2.1", "expo-notifications": "~0.18.1", "expo-optimize": "^0.2.19", "expo-permissions": "~14.1.1", "expo-screen-orientation": "~5.1.1", "expo-splash-screen": "~0.18.2", "expo-sqlite": "~11.1.1", "expo-status-bar": "~1.4.4", "expo-updates": "~0.16.4", "html-entities": "^2.3.3", "link": "^0.1.5", "match-all": "^1.2.6", "md5": "^2.3.0", "metro-config": "^0.76.3", "mime": "^3.0.0", "native-base": "^3.4.17", "node-fetch": "^3.2.10", "parse-data-url": "^4.0.1", "patch-package": "^6.5.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.71.8", "react-native-animatable": "^1.3.3", "react-native-appearance": "^0.0.0", "react-native-base64": "^0.2.1", "react-native-calendars": "^1.1275.0", "react-native-countdown-circle-timer": "^3.2.1", "react-native-dropdown-picker": "^5.4.2", "react-native-elements": "^3.4.2", "react-native-exit-app": "^1.1.0", "react-native-flash-message": "^0.2.1", "react-native-gesture-handler": "~2.9.0", "react-native-hide-with-keyboard": "^1.2.1", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.6.2", "react-native-map-link": "^2.11.0", "react-native-maps": "1.3.2", "react-native-maps-directions": "^1.9.0", "react-native-modal": "^13.0.1", "react-native-numeric-input": "^1.9.1", "react-native-pager-view": "6.1.2", "react-native-paper": "^4.12.2", "react-native-paper-tabs": "^0.10.1", "react-native-popable": "^0.4.3", "react-native-progress": "^5.0.0", "react-native-public-ip": "^1.0.2", "react-native-quick-base64": "^2.0.3", "react-native-reanimated": "~2.14.4", "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "4.5.0", "react-native-safe-area-view": "^1.1.1", "react-native-screens": "~3.20.0", "react-native-signature-canvas": "^4.4.1", "react-native-svg": "13.4.0", "react-native-vector-icons": "^9.0.0", "react-native-web": "~0.18.11", "react-native-webview": "11.26.0", "react-number-format": "^4.9.3", "react-refresh": "^0.12.0", "react-router-dom": "^6.0.2", "remove-accents": "^0.4.4", "utf8": "^3.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/express": "^4.17.17", "@types/md5": "^2.3.1", "@types/react": "~18.0.27", "@types/react-native-base64": "^0.2.0", "@types/styled-components": "^5.1.18", "@types/utf8": "^3.0.1", "ts-node": "^10.9.1", "typescript": "^4.9.4" },

From what I noticed, I got the error first on ScreenOrientation

cmcWebCode40 commented 1 year ago

@cmcWebCode40 - I was able to integrate the plugin easily using expo-build-properties. Add this code to your app.json, rebuild the dev client and you are good to go!

[
        "expo-build-properties",
        {
          "android": {},
          "android": {
            "extraMavenRepos": ["https://maven.zohodl.com"]
          },
          "ios": {
            "useFrameworks": "static",
            "extraPods": [
              {
                "name": "RNZohoSalesIQ",
                "path": "../node_modules/react-native-zohosalesiq-mobilisten/ios"
              }
            ]
          }
        }
      ]

Thanks @ubaidkolad , for this i will try it , i hope it works for expo 49 , i'm currently AFK

cmcWebCode40 commented 1 year ago

thanks @ubaidkolad , this fixed the issue

ubaidkolad commented 1 year ago

@cmcWebCode40 - great! By the way were you able to enable push notifications in the expo app without prebuild?

Eliost commented 1 year ago

@cmcWebCode40 - great! By the way were you able to enable push notifications in the expo app without prebuild?

Personally, I use push notifications on my app, and I don't need prebuild. Testing only on Android again.

cmcWebCode40 commented 1 year ago

@cmcWebCode40 - great! By the way were you able to enable push notifications in the expo app without prebuild?

yes, but you can only test your PN using a real device

ubaidkolad commented 1 year ago

I just added APN on zoho dashboard. But I don't get push notifications of the new chats. Is there any extra config required? @cmcWebCode40