Skip to content

Commit 72bcb06

Browse files
author
Quoc Khanh
committed
demo react-native-callkeep
1 parent b1bb503 commit 72bcb06

File tree

9 files changed

+148
-21
lines changed

9 files changed

+148
-21
lines changed

‎example/App.js‎

Lines changed: 109 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,74 @@ import {
77
TouchableHighlight,
88
DeviceEventEmitter,
99
Image,
10+
PermissionsAndroid,
11+
AppState,
1012
} from 'react-native';
1113
import RNBootSplash from 'react-native-bootsplash';
1214
import messaging from '@react-native-firebase/messaging';
1315
import Clipboard from '@react-native-community/clipboard';
1416
import IncomingCall from 'react-native-incoming-call';
17+
import RNCallKeep from 'react-native-callkeep';
1518

16-
export function handleRemoteMessage(remoteMessage) {
19+
const USE_CALLKEEP = false;
20+
21+
const PRIMARY_COLOR = USE_CALLKEEP ? '#1AD1EC' : '#8271FC';
22+
const SECONDARY_COLOR = USE_CALLKEEP ? '#F55994' : '#FDDA97';
23+
const BTN_LABEL_COLOR = USE_CALLKEEP ? '#FFFFFF' : '#21346E';
24+
25+
function setupCallKeep() {
26+
const options = {
27+
android: {
28+
alertTitle: 'Permissions Required',
29+
alertDescription:
30+
'This application needs to access your phone calling accounts to make calls',
31+
cancelButton: 'Cancel',
32+
okButton: 'ok',
33+
imageName: 'ic_launcher',
34+
additionalPermissions: [PermissionsAndroid.PERMISSIONS.READ_CONTACTS],
35+
},
36+
};
37+
38+
try {
39+
RNCallKeep.setup(options);
40+
RNCallKeep.setAvailable(true); // Only used for Android, see doc above.
41+
} catch (err) {
42+
console.error('initializeCallKeep error:', err.message);
43+
}
44+
}
45+
46+
USE_CALLKEEP && setupCallKeep();
47+
48+
export function handleRemoteMessage(remoteMessage, isHeadless) {
1749
if (remoteMessage?.notification?.title === 'Incoming call') {
18-
IncomingCall.display(
19-
'123',
20-
'Quocs',
21-
'https://avatars3.githubusercontent.com/u/16166195',
22-
);
50+
console.log('ready...');
51+
const callUUID = '23727631';
52+
if (USE_CALLKEEP) {
53+
setupCallKeep();
54+
RNCallKeep.displayIncomingCall(
55+
callUUID,
56+
'[email protected]',
57+
'Quoc Khanh',
58+
'email',
59+
true,
60+
);
61+
RNCallKeep.addEventListener('answerCall', ({callUUID: uuid}) => {
62+
RNCallKeep.setCurrentCallActive(uuid);
63+
if (isHeadless) {
64+
RNCallKeep.openAppFromHeadlessMode(uuid);
65+
} else {
66+
console.log(uuid);
67+
RNCallKeep.backToForeground();
68+
}
69+
});
70+
} else {
71+
IncomingCall.display(
72+
callUUID,
73+
'Quocs',
74+
'Video Call',
75+
'https://avatars3.githubusercontent.com/u/16166195',
76+
);
77+
}
2378
// Could also persist data here for later uses
2479
}
2580
}
@@ -38,6 +93,10 @@ const App = () => {
3893
return setDeviceToken(token);
3994
});
4095

96+
AppState.addEventListener('change', state =>
97+
console.log('state change', state),
98+
);
99+
41100
// Listen to whether the token changes
42101
return messaging().onTokenRefresh(token => {
43102
setDeviceToken(token);
@@ -71,8 +130,43 @@ const App = () => {
71130
});
72131
}
73132

133+
async function handleCallKeep() {
134+
const extras = await RNCallKeep.getExtrasFromHeadlessMode();
135+
136+
if (extras) {
137+
console.log('getExtrasFromHeadlessMode', extras);
138+
}
139+
140+
const scs = await RNCallKeep.supportConnectionService();
141+
142+
console.log('supportConnectionService: ', scs);
143+
144+
RNCallKeep.addEventListener('answerCall', payload => {
145+
// Do your normal `Answering` actions here.
146+
setCallPayload(payload);
147+
console.log('answerCall', payload);
148+
RNCallKeep.backToForeground();
149+
});
150+
151+
RNCallKeep.addEventListener('endCall', payload => {
152+
// Do your normal `Hang Up` actions here
153+
setCallPayload(payload);
154+
console.log('endCall', payload);
155+
});
156+
157+
RNCallKeep.addEventListener('didDisplayIncomingCall', payload => {
158+
// you might want to do following things when receiving this event:
159+
// - Start playing ringback if it is an outgoing call
160+
console.log('didDisplayIncomingCall', payload);
161+
});
162+
}
163+
74164
useEffect(() => {
75-
handleIncomingCall();
165+
if (USE_CALLKEEP) {
166+
handleCallKeep();
167+
} else {
168+
handleIncomingCall();
169+
}
76170
}, []);
77171

78172
function handleCopyToken() {
@@ -87,7 +181,10 @@ const App = () => {
87181
return (
88182
<View style={styles.wrapper}>
89183
<Text style={styles.appTitle}>RNCall</Text>
90-
<Text style={styles.appDesc}>example for react-native-incoming-call</Text>
184+
<Text style={styles.appDesc}>
185+
example for{' '}
186+
{!USE_CALLKEEP ? 'react-native-incoming-call' : 'react-native-callkeep'}
187+
</Text>
91188
<View style={styles.container}>
92189
{callPayload ? (
93190
<>
@@ -106,10 +203,7 @@ const App = () => {
106203
</>
107204
) : deviceToken ? (
108205
<>
109-
<Image
110-
style={styles.image}
111-
source={require('./images/waiting-call.jpg')}
112-
/>
206+
<Image style={styles.image} source={{uri: 'ic_launcher'}} />
113207
<Text style={styles.header}>FCM Device Token</Text>
114208
<Text style={styles.text}>{deviceToken}</Text>
115209
<TouchableHighlight
@@ -136,7 +230,7 @@ const App = () => {
136230
const styles = StyleSheet.create({
137231
wrapper: {
138232
flex: 1,
139-
backgroundColor: '#8271FC',
233+
backgroundColor: PRIMARY_COLOR,
140234
},
141235
appTitle: {
142236
textAlign: 'center',
@@ -184,15 +278,15 @@ const styles = StyleSheet.create({
184278
borderRadius: 10,
185279
paddingHorizontal: 20,
186280
bottom: -25,
187-
backgroundColor: '#FDDA97',
281+
backgroundColor: SECONDARY_COLOR,
188282
justifyContent: 'center',
189283
alignItems: 'center',
190284
alignSelf: 'center',
191285
elevation: 5,
192286
},
193287
btnLabel: {
194288
fontSize: 14,
195-
color: '#21346E',
289+
color: BTN_LABEL_COLOR,
196290
fontFamily: 'monospace',
197291
fontWeight: '700',
198292
},

‎example/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Example for react-native-incoming-call
2+
3+
*Note: I also add demo for `jpudysz` fork of react-native-callkeep by set `USE_CALLKEEP` to true.*

‎example/android/app/src/main/AndroidManifest.xml‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,26 @@
33

44
<uses-permission android:name="android.permission.INTERNET" />
55
<uses-permission android:name="android.permission.VIBRATE" />
6-
6+
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
7+
<uses-permission android:name="android.permission.BIND_TELECOM_CONNECTION_SERVICE"/>
8+
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
9+
<uses-permission android:name="android.permission.CALL_PHONE" />
10+
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
11+
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
12+
713
<application
814
android:name=".MainApplication"
915
android:label="@string/app_name"
1016
android:icon="@mipmap/ic_launcher"
1117
android:allowBackup="false"
1218
android:theme="@style/AppTheme">
19+
<service android:name="io.wazo.callkeep.VoiceConnectionService"
20+
android:label="Wazo"
21+
android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
22+
<intent-filter>
23+
<action android:name="android.telecom.ConnectionService" />
24+
</intent-filter>
25+
</service>
1326
<activity
1427
android:name=".MainActivity"
1528
android:label="@string/app_name"
@@ -27,6 +40,7 @@
2740
<category android:name="android.intent.category.LAUNCHER" />
2841
</intent-filter>
2942
</activity>
43+
<service android:name="io.wazo.callkeep.RNCallKeepBackgroundMessagingService" />
3044
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
3145
<activity android:name="com.incomingcall.UnlockScreenActivity" />
3246
</application>

‎example/android/app/src/main/java/com/quocs/rncall/MainApplication.java‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import android.content.Context;
55
import com.facebook.react.PackageList;
66
import com.facebook.react.ReactApplication;
7+
import io.wazo.callkeep.RNCallKeepPackage;
78
import com.facebook.react.ReactInstanceManager;
89
import com.facebook.react.ReactNativeHost;
910
import com.facebook.react.ReactPackage;

‎example/android/settings.gradle‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
rootProject.name = 'RNCall'
2+
include ':react-native-callkeep'
3+
project(':react-native-callkeep').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-callkeep/android')
24
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
35
include ':app'

‎example/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import App, {handleRemoteMessage} from './App';
55
import {name as appName} from './app.json';
66

77
messaging().setBackgroundMessageHandler(async remoteMessage => {
8-
handleRemoteMessage(remoteMessage);
8+
handleRemoteMessage(remoteMessage, true);
99
});
1010

1111
AppRegistry.registerComponent(appName, () => App);

‎example/ios/Podfile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ target 'example' do
7777
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
7878
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
7979

80+
pod 'RNCallKeep', :path => '../node_modules/react-native-callkeep'
81+
8082
target 'exampleTests' do
8183
inherit! :complete
8284
# Pods for testing

‎example/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
"react": "16.11.0",
1717
"react-native": "0.62.2",
1818
"react-native-bootsplash": "^2.2.4",
19-
"react-native-incoming-call": "bkdev98/react-native-incoming-call"
19+
"react-native-callkeep": "git://github.com/jpudysz/react-native-callkeep",
20+
"react-native-incoming-call": "MajidNajafi/react-native-incoming-call",
21+
"uuid": "^8.3.0"
2022
},
2123
"devDependencies": {
2224
"@babel/core": "^7.6.2",

‎example/yarn.lock‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5437,9 +5437,13 @@ react-native-bootsplash@^2.2.4:
54375437
jimp "0.10.1"
54385438
prompts "2.3.2"
54395439

5440-
react-native-incoming-call@bkdev98/react-native-incoming-call:
5441-
version "1.2.0"
5442-
resolved "https://codeload.github.com/bkdev98/react-native-incoming-call/tar.gz/65a2059d155c025b2de377c6c942aecee8836a86"
5440+
"react-native-callkeep@git://github.com/jpudysz/react-native-callkeep":
5441+
version "3.0.13"
5442+
resolved "git://github.com/jpudysz/react-native-callkeep#31118a0c90ca5d58824b33ed9ddb80b63e930ea7"
5443+
5444+
react-native-incoming-call@MajidNajafi/react-native-incoming-call:
5445+
version "1.2.18"
5446+
resolved "https://codeload.github.com/MajidNajafi/react-native-incoming-call/tar.gz/97d8891e98d66faed0939fa0600e208c87955156"
54435447

54445448
[email protected]:
54455449
version "0.62.2"
@@ -6579,6 +6583,11 @@ uuid@^3.3.2:
65796583
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
65806584
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
65816585

6586+
uuid@^8.3.0:
6587+
version "8.3.0"
6588+
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
6589+
integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
6590+
65826591
v8-compile-cache@^2.0.3:
65836592
version "2.1.1"
65846593
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"

0 commit comments

Comments
 (0)