Search code examples
iosreact-nativequickblox

TypeError: null is not an object (evaluating 'Chat.addListener')

I have a react native project that was working fine both on android and iOS. I added the calling and chat service to my project using the package 'react-native-quickblox-sdk v0.5.2-beta' afterwards.

It works perfectly fine on android, but when I run it on iOS, after loading all the bundles, just before opening the app, it brings up an error.

TypeError: null is not an object (evaluating 'Chat.addListener'). Here's the image of the error. Error screen

my podFile:

plugin 'cocoapods-fix-react-native'

platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
pod 'Firebase/Core', '~> 6.15.0'
pod 'Firebase/Messaging'

target 'myApp' do

permissions_path = '../node_modules/react-native-permissions/ios'
  # Pods for myApp
  pod 'QuickBlox'
  pod 'Quickblox-WebRTC'
  pod 'RNPermissions', :path => '../node_modules/react-native-permissions'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'

  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'


  pod 'CodePush', :path => '../node_modules/react-native-code-push'
  pod 'ReactNativeExceptionHandler', :podspec => '../node_modules/react-native-exception-handler/ReactNativeExceptionHandler.podspec'
  # pod 'RNFirebase', :path => '../node_modules/react-native-firebase/ios'
  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
  # pod 'RNGestureHandler', :podspec => '../node_modules/react-native-gesture-handler/RNGestureHandler.podspec'
  pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'


  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'react-native-orientation-locker', :path => '../node_modules/react-native-orientation-locker'
  pod 'RNBootSplash', :path => '../node_modules/react-native-bootsplash'
  pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

  pod 'lottie-ios', :path => '../node_modules/lottie-ios'

  # pod 'RNCPushNotificationIOS', :path => '../node_modules/@react-native-community/push-notification-ios'

end

I added and deleted lots of stuff (such as the quickblox pods on the top) and also I changed some codes in 'node_modules/quickblox-react-native-sdk' to get it to work but the problem persists.

In the address: {PROJECT_DIRECTORY}/node_modules/quickblox-react-native-sdk/index.js there is an object that it seems it returns null or undefined. here's the code.

the sdk code

changing Chat.addListener to Chat && Chat.addListener throws another TypeError with this title: ..... (evaluating 'Chat.removeEventListeners') and so on..

Any helps or solutions will be really appreciated.

Solution

  • After struggling for 2 days I found the solution.

    The problem turned out to be with iOS linking. The pods "QuickBlox" & "Quickblox-WebRTC" were unnecessary in the podfile (I added it later to see if it works but it wasn't working).

    Instead I linked 'quickblox-react-native-sdk' with iOS with rnpm.

    So that's the way:

    1- execute this command on the bash:

    react-native link quickblox-react-native-sdk --platforms ios

    2- write pod install command in {project-folder}/ios on the bash afterwards and the quickblox sdk pod gets installed.

    Run the project again and now "quickblox-react-native-sdk" works perfectly fine on iOS.