help setting up event listener?

I think I have react-native-callkit set up correctly, because I can get checkIfBusy to report true if I am in a call, and false otherwise. I am somewhat new to react-native so please forgive me if this is something basic!

However, I'm having trouble getting the event listeners to work.

My current setup is this:

in the component constructor:
RNCallKit.addEventListener('didReceiveStartCallAction', this.onRNCallKitDidReceiveStartCallAction);

as the first component method after the constructor and the state declaration:

onRNCallKitDidReceiveStartCallAction(data) {
   
 console.log('--Start call action--');
    console.log(data);
    console.log(uuid);
    const myUuid = uuid.v4();
    RNCallKit.startCall(myUuid, data.handle);
  }

I open the app on my Iphone (5s with iOS 11.4), with XCode and the debugger running, and make a call from my Recents, but the console doesn't display '--Start call action--', which I interpret to mean that this event is not being processed.

I'm not seeing any error messages or anything. Thank you for any help!

[davidcantonnoteges]

+1

@aarkalyk Do you have any thoughts here? I'm sorry to mention you without prompting, just figured you may have some helpful insights! Thanks

[davidcantonnoteges]

Listeners not working for me, none fired when receive calls, or i make calls..

[aarkalyk]

Hey guys!

Are you sure you've implemented this delegate method?

- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
  return [RNCallKit application:application
           continueUserActivity:userActivity
             restorationHandler:restorationHandler];
}

Hi @aarkalyk, thank you so much for responding!

This is my AppDelegate.m, please let me know what you think!

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"
#import "RNCallKit.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  /*
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"catchup"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  */
  ///*
  //Initialise RNCallKit
  RNCallKit *rncallkit = [[RNCallKit alloc] init];

  //Initialise React Bridge with RNCallKit
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                      moduleProvider:^{ return @[rncallkit]; }
                                      launchOptions:launchOptions];

  //Initialise React Root View with React Bridge you've just created
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                 moduleName:@"catchup"
                                                 initialProperties:nil];
  //*/

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;

} // EDITED !!
- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
  restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
  return [RNCallKit application:application
           continueUserActivity:userActivity
             restorationHandler:restorationHandler];
}

@end

[aarkalyk]

I think these lines should be removed. No need to initialize RNCallKit.

///*
  //Initialise RNCallKit
  RNCallKit *rncallkit = [[RNCallKit alloc] init];

  //Initialise React Bridge with RNCallKit
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                      moduleProvider:^{ return @[rncallkit]; }
                                      launchOptions:launchOptions];

  //Initialise React Root View with React Bridge you've just created
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                 moduleName:@"catchup"
                                                 initialProperties:nil];
  //*/

@aarkalyk Ok I'll give this a shot, thanks a ton!

[davidcantonnoteges]

I have removed these lines and no working in my project

Hi @aarkalyk, thanks for all your help so far. I commented out the lines you suggested in AppDelegate.m, and still can't get the EventListener functions to work.

Here is the main component that I am using to try and display current call information (right now just to the console). The main difference with what is listed in the npm doc for callkit is the initialization (i.e., using constructor() instead of constructor(props) and using the super() line.) Is this potentially the problem?

Again the problem is that when starting a call from Recents and from ending a call I don't see the output from the functions onRNCallKitDidReceiveStartCallAction or onRNCallKitPerformEndCallAction. Thanks!

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import RNCallKit from 'react-native-callkit';
import uuid from 'uuid';
import Card from './Card';
import CardSection from './CardSection';
import Button from './Button';

class CheckActive extends Component {

  constructor() {
      super();

      // Initialise RNCallKit
      try {
          RNCallKit.setup({
              appName: 'catchup'
          });
      } catch (err) {
          console.log('error:', err.message);
      }

      RNCallKit.addEventListener('didReceiveStartCallAction',
        this.onRNCallKitDidReceiveStartCallAction);

      RNCallKit.addEventListener('endCall',
        this.onRNCallKitPerformEndCallAction);


      console.log('--RNCallKit Initialized--');
  }

  state = {
      uuid: 'None',
      handle: 'None',
      currentCall: 0
  };

  onRNCallKitDidReceiveStartCallAction(data) {
    console.log('-- DidRecieveStartCall --');
    console.log(data);
    console.log(uuid.v4());
  }

  onRNCallKitPerformEndCallAction(data) {
    console.log('end call');
    console.log(data);
  }

  checkIfBusy() {
    RNCallKit.checkIfBusy().then(response => this.setState({ currentCall: response }));
  }

  // in render is where you can define const
  render() {
    console.log('--Render CheckActive--');
    console.log(this);
    //this.checkIfBusy();
    return (
      <Card>
        <CardSection>
          <View>
            <Button>Any current calls?</Button>
            <Text>{ this.state.currentCall }</Text>
          </View>
        </CardSection>
      </Card>
    );
  }
}

export default CheckActive;