Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-webrtc/react-native-callkit
#deprecated iOS 10 new CallKit framework for React Native
https://github.com/react-native-webrtc/react-native-callkit
Last synced: 3 months ago
JSON representation
#deprecated iOS 10 new CallKit framework for React Native
- Host: GitHub
- URL: https://github.com/react-native-webrtc/react-native-callkit
- Owner: react-native-webrtc
- License: isc
- Archived: true
- Created: 2016-12-28T08:41:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-26T12:13:38.000Z (over 5 years ago)
- Last Synced: 2024-04-22T01:55:20.524Z (7 months ago)
- Language: Objective-C
- Homepage:
- Size: 70.3 KB
- Stars: 122
- Watchers: 12
- Forks: 68
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-callkit ★94 - iOS 10 CallKit framework for React Native (Components / System)
README
# DEPRECATED
# This is no longer supported, please use [react-native-callkeep](https://github.com/react-native-webrtc/react-native-callkeep) instead.
--
## React Native CallKit - iOS >= 10.0 only
[](https://badge.fury.io/js/react-native-callkit)
[](https://img.shields.io/npm/dm/react-native-callkit.svg?maxAge=2592000)
**React Native CallKit** utilises a brand new iOS 10 framework **CallKit** to make the life easier for VoIP developers using React Native.
For more information about **CallKit**, please see [Official CallKit Framework Document][1] or [Introduction to CallKit by Xamarin][2]
**Note**: Since CallKit is quite new, this module will be updated frequently so be careful with the version you are using.
## Version
Use version >= **1.1.0** if you're using react native >= 0.40
## Installation (without CocoaPods)
### NPM module
```bash
npm install --save react-native-callkit
```
### Link Library
```bash
rnpm link react-native-callkit
```
## Installation (with CocoaPods)
### NPM module
```bash
npm install --save react-native-callkit
```
### CocaPods
```bash
cd ios
pod install
```
## Installation common steps
### Info.plist
Add `voip` under `UIBackgroundModes`
Note that it must be done via editing `Info.plist` as in Xcode 9 there is no `voip` option in `Capabilities`.
```
UIBackgroundModes
voip
```
### Add Frameworks
In `Xcode` -> `Build Phases` -> `Link Binary With Libraries`, add `CallKit.framework` and `Intents.framework` with `Optional` status
### AppDelegate.m
#### - Import Library
```obj-c
#import "RNCallKit.h"
```
#### - Change the way you initialise React Root View (required if <= 1.2.1)
Initialise **RNCallKit** first, since we need our custom `observer` of `NSNotificationCenter` to be started as soon as the app is initialising
```diff
// This is how you normally initialise React Root View, delete it
-RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
- moduleName:@"MyApp"
- 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:@"MyApp"
+ initialProperties:nil];
```
#### - Handling User Activity
This delegate will be called when the user tries to start a call from native Phone App
```obj-c
- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
restorationHandler:(void(^)(NSArray * __nullable restorableObjects))restorationHandler
{
return [RNCallKit application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
```
## API
### setup
- **options**: object
- **appName**: string (required)
- It will be displayed on system UI when incoming calls received
- **imageName**: string (optional)
- If provided, it will be displayed on system UI during the call
- **ringtoneSound**: string (optional)
- If provided, it will be played when incoming calls received; the system will use the default ringtone if this is not provided
Initialise RNCallKit with options
### displayIncomingCall
- **uuid**: string
- **handle**: string
- **handleType**: string (optional)
- generic
- number (default)
- email
- **hasVideo**: boolean (optional)
- false (default)
- **localizedCallerName**: string (optional)
Call when you receive incoming calls to display system UI
### startCall
- **uuid**: string
- **handle**: string
- **handleType**: string (optional)
- generic
- number (default)
- email
- **contactIdentifier**: string (optional)
- The identifier is displayed in the native call UI, and is typically the name of the call recipient.
Call when you make an outgoing call
### endCall
- **uuid**: string
Call when you finish an incoming/outgoing call
### setMutedCall
- **uuid**: string
- **muted**: boolean
Switch the mic on/off
### checkIfBusy
Checks if there are any active calls on the device and returns a promise with a boolean value (`true` if there're active calls, `false` otherwise).
### checkSpeaker
Checks if the device speaker is on and returns a promise with a boolean value (`true` if speaker is on, `false` otherwise).
## Events
### - didReceiveStartCallAction
**data**:
```javascript
{
handle: '886900000000' // The number/name got from Recents in built-in Phone app
}
```
User start call action from **Recents** in built-in **Phone** app
Try to start your call action from here (e.g. get credentials of the user by `data.handle` and/or send INVITE to your SIP server)
After all works are done, remember to call `RNCallKit.startCall(uuid, calleeNumber)`
### - answerCall
User answer the incoming call
Do your normal `Answering` actions here
**data**:
```javascript
{
callUUID: 'f0ee907b-6dbd-45a8-858a-903decb198f8' // The UUID of the call that is to be answered
}
```
### - endCall
User finish the call
Do your normal `Hang Up` actions here
**data**:
```javascript
{
callUUID: 'f0ee907b-6dbd-45a8-858a-903decb198f8' // The UUID of the call that is to be hung
}
```
### - didActivateAudioSession
The `AudioSession` has been activated by **RNCallKit**, you might want to do following things when receiving this event:
- Start playing ringback if it is an outgoing call
### - didDisplayIncomingCall
Callback for `RNCallKit.displayIncomingCall`
**error**: string (optional)
### - didPerformSetMutedCallAction
A call was muted by the system or the user:
**muted**: boolean
## Usage
```javascript
import React from 'react';
import RNCallKit from 'react-native-callkit';
import uuid from 'uuid';
class RNCallKitExample extends React.Component {
constructor(props) {
// Initialise RNCallKit
let options = {
appName: 'RNCallKitExample',
imageName: 'my_image_name_in_bundle',
ringtoneSound: 'my_ringtone_sound_filename_in_bundle',
};
try {
RNCallKit.setup(options);
} catch (err) {
console.log('error:', err.message);
}
// Add RNCallKit Events
RNCallKit.addEventListener('didReceiveStartCallAction', this.onRNCallKitDidReceiveStartCallAction);
RNCallKit.addEventListener('answerCall', this.onRNCallKitPerformAnswerCallAction);
RNCallKit.addEventListener('endCall', this.onRNCallKitPerformEndCallAction);
RNCallKit.addEventListener('didActivateAudioSession', this.onRNCallKitDidActivateAudioSession);
RNCallKit.addEventListener('didDisplayIncomingCall', this.onRNCallKitDidDisplayIncomingCall);
RNCallKit.addEventListener('didPerformSetMutedCallAction', this.onRNCallKitDidPerformSetMutedCallAction);
}
onRNCallKitDidReceiveStartCallAction(data) {
/*
* Your normal start call action
*
* ...
*
*/
let _uuid = uuid.v4();
RNCallKit.startCall(_uuid, data.handle);
}
onRNCallKitPerformAnswerCallAction(data) {
/* You will get this event when the user answer the incoming call
*
* Try to do your normal Answering actions here
*
* e.g. this.handleAnswerCall(data.callUUID);
*/
}
onRNCallKitPerformEndCallAction(data) {
/* You will get this event when the user finish the incoming/outgoing call
*
* Try to do your normal Hang Up actions here
*
* e.g. this.handleHangUpCall(data.callUUID);
*/
}
onRNCallKitDidActivateAudioSession(data) {
/* You will get this event when the the AudioSession has been activated by **RNCallKit**,
* you might want to do following things when receiving this event:
*
* - Start playing ringback if it is an outgoing call
*/
}
onRNCallKitDidDisplayIncomingCall(error) {
/* You will get this event after RNCallKit finishes showing incoming call UI
* You can check if there was an error while displaying
*/
}
onRNCallKitDidPerformSetMutedCallAction(muted) {
/* You will get this event after the system or the user mutes a call
* You can use it to toggle the mic on your custom call UI
*/
}
// This is a fake function where you can receive incoming call notifications
onIncomingCall() {
// Store the generated uuid somewhere
// You will need this when calling RNCallKit.endCall()
let _uuid = uuid.v4();
RNCallKit.displayIncomingCall(_uuid, "886900000000")
}
// This is a fake function where you make outgoing calls
onOutgoingCall() {
// Store the generated uuid somewhere
// You will need this when calling RNCallKit.endCall()
let _uuid = uuid.v4();
RNCallKit.startCall(_uuid, "886900000000")
}
// This is a fake function where you hang up calls
onHangUpCall() {
// get the _uuid you stored earlier
RNCallKit.endCall(_uuid)
}
render() {
}
}
```
## Original Author:
[](https://github.com/ianlin)
## License
[ISC License][3] (functionality equivalent to **MIT License**)
[1]: https://developer.apple.com/reference/callkit?language=objc
[2]: https://developer.xamarin.com/guides/ios/platform_features/introduction-to-ios10/callkit/
[3]: https://opensource.org/licenses/ISC
[4]: https://github.com/zxcpoiu/react-native-incall-manager