Fixing Common Issues in Zego Call Kit for React Native Developers 💻🚀

Introduction 🛠️
If you're a React Native developer working with Zego Call Kit, you've likely encountered frustrating issues with no straightforward solutions available online. I faced two major problems while integrating @zegocloud/zego-uikit-prebuilt-call-rn and zego-callkit-react-native, and after much debugging, I found effective fixes that will save you a lot of time.

In this article, I'll walk you through these issues, their causes, and the solutions I implemented to resolve them using a patching technique. Hopefully, this will save you time and effort! ⏳

Issue #1: ZegoUIKit.kitLogInfo error apply of undefined ⚠️
Problem ❌
This issue originated from the @zegocloud/zego-uikit-prebuilt-call-rn library. When running my Android app, it would crash due to an undefined method kitLogInfo, while on iOS, it would just show a warning.

Root Cause 🧐
The kitLogInfo function was expected to be present in ZegoUIKitLogger, but it was missing in some versions of the library, leading to runtime errors.

Solution ✅
I resolved this by modifying the logging mechanism using a patch. The original problematic code looked like this:

import {ZegoUIKitLogger} from '@zegocloud/zego-uikit-rn';
const module = 'PrebuiltCall'
export const zloginfo = (...msg) => {
  ZegoUIKitLogger.logInfo(module, ...msg);
};
export const zlogwarning = (...msg) => {
  ZegoUIKitLogger.logWarning(module, ...msg);
};
export const zlogerror = (...msg) => {
  ZegoUIKitLogger.logError(module, ...msg);
};

I changed it to:

"use strict";
import { Platform } from "react-native";
import _zegoUikitRn from "@zegocloud/zego-uikit-rn";
const zloginfo = (...msg) => {
  if (_zegoUikitRn.default.kitLogInfo) {
    _zegoUikitRn.default.kitLogInfo('PrebuiltCall', ...msg);
  } else {
    console.warn(`kitLogInfo is not defined in ZegoUIKit in ${Platform.OS}`);
  }
};
export { zloginfo };

This ensures that if kitLogInfo is undefined, it falls back to a console warning instead of causing a crash. 🛠️

Issue #2: TypeError: Cannot read property 'prefix' of null, js engine: hermes 🐞
Problem ❌
This issue was coming from the zego-callkit-react-native library. On iOS, it threw a warning, but on Android, the app crashed abruptly.

Root Cause 🧐
The problem was in the following line:

const Prefix = ZegoCallKitNativeModule.prefix;

When using Hermes, ZegoCallKitNativeModule was sometimes null, causing an error when trying to access prefix.

Solution ✅
I fixed it by modifying this line to:

import { Platform } from 'react-native';
const Prefix = Platform.OS == 'ios' ? ZegoCallKitNativeModule.prefix : '';

This ensures that on Android, the app does not crash due to a null reference. 🛠️

Applying Patches for These Fixes 🩹
To ensure these changes persist across updates, I used the patch-package tool. Here's how I applied and committed these patches:

Step 1: Install patch-package 📦
yarn add patch-package postinstall-postinstall

Step 2: Make the Changes and Save the Patch 📝
npx patch-package @zegocloud/zego-uikit-prebuilt-call-rn
npx patch-package zego-callkit-react-native

Step 3: Ensure Patch is Applied Automatically 🔄
Add this script to package.json:
"scripts": {
"postinstall": "patch-package"
}

Now, whenever a developer runs yarn install, the patches will be applied automatically. 🛠️

Step 4: Push Patches to GitHub 🚀
I committed the patches so that other developers on my team could use them:

git add patches/
git commit -m "Fix Zego issues with patch-package"
git push origin main

Contributing to Open Source 🤝

I also created pull requests (PRs) to contribute these fixes upstream. If merged, we won't need the patches anymore. Here's my PR for @zegocloud/zego-uikit-prebuilt-call-rn:
🔗 PR #14 - Fix kitLogInfo Issue
Unfortunately, I couldn't find zego-callkit-react-native on GitHub, so I had to rely on patching for that one. 😕

Conclusion 🎯
``
If you're working with Zego Call Kit and facing these frustrating issues, I hope this guide helps you save time. Let me know if you encounter any other problems - let's work together to improve these libraries! 🚀
Feel free to share your thoughts in the comments or contribute to the PR to get these fixes merged! 🔥