Add Custom Text in Native Call Notification in React Native CallKeep

Are you tired of the default “Incoming Call” notification in your React Native app? Want to add some personalized touch to it? Well, you’re in luck! In this article, we’ll guide you through the process of adding custom text in native call notification using React Native CallKeep.

What is React Native CallKeep?

Before we dive into the tutorial, let’s quickly introduce React Native CallKeep. It’s a popular library that allows you to handle VoIP calls in your React Native app, providing a seamless calling experience for your users. With CallKeep, you can easily integrate voice and video calling features into your app, and even customize the native call notification to fit your brand’s identity.

Why Add Custom Text in Native Call Notification?

Adding custom text in native call notification can be a game-changer for your app’s user experience. Here are a few reasons why:

• Personalization: Customize the notification to match your app’s tone and personality.
• Branding: Add your app’s logo or branding elements to make the notification more recognizable.
• Contextual information: Provide additional information, such as the caller’s name or the purpose of the call, to help users make informed decisions.

Prerequisites

Before we start, make sure you have the following:

1. A React Native project set up with CallKeep installed.
2. A basic understanding of React Native and JavaScript.
3. A willingness to learn and experiment! 😊

Step 1: Set Up CallKeep

If you haven’t already, set up CallKeep in your React Native project. Follow the official CallKeep documentation to install and configure the library.

npm install react-native-callkeep

Once installed, import CallKeep in your JavaScript file:

import { CallKeep } from 'react-native-callkeep';

Step 2: Create a CallKeep Instance

Create a new instance of CallKeep and initialize it with your app’s settings:

const callKeepInstance = new CallKeep({
  appName: 'MyApp',
  appId: 'com.example.myapp',
});

Step 3: Add Custom Text to Native Call Notification

Now, let’s get to the good stuff! To add custom text to the native call notification, you’ll need to use the `displayIncomingCall` method provided by CallKeep.

callKeepInstance.displayIncomingCall({
  uuid: '1234567890',
  handle: 'John Doe',
  hasVideo: true,
  localizedCallerName: 'MyApp',
  callerName: 'John Doe',
  supportsDTMF: true,
  // Add your custom text here!
  additionalInfo: 'This is a custom notification from MyApp!',
});

In the above code, we’ve added an `additionalInfo` property to the `displayIncomingCall` method, containing our custom text. This text will be displayed below the caller’s name in the native call notification.

Step 4: Customize the Notification Layout

By default, the native call notification will display the caller’s name and your custom text in a single line. To customize the layout, you can use the `infos` property to specify multiple lines of text:

callKeepInstance.displayIncomingCall({
  // ...
  infos: [
    {
      label: 'Caller Name',
      value: 'John Doe',
    },
    {
      label: 'Custom Text',
      value: 'This is a custom notification from MyApp!',
    },
  ],
});

In this example, we’ve created an `infos` array with two objects, each representing a separate line of text in the notification. The `label` property specifies the label for each line, and the `value` property contains the actual text.

Step 5: Test Your Custom Notification

That’s it! Run your app and simulate an incoming call to test your custom notification. You should see your additional text displayed below the caller’s name.

Platform	Notification Example
iOS
Android

Troubleshooting

If you encounter any issues with your custom notification, check the following:

• Make sure you’ve installed and configured CallKeep correctly.
• Verify that you’ve added the `additionalInfo` or `infos` property to the `displayIncomingCall` method.
• Check your app’s permissions and settings to ensure that notifications are enabled.

Conclusion

In this article, we’ve covered the steps to add custom text in native call notification using React Native CallKeep. By following these instructions, you can create a more personalized and engaging calling experience for your app’s users. Don’t forget to experiment with different customization options and layouts to find the perfect fit for your brand.

Happy coding, and see you in the next article! 👋

References:

• React Native CallKeep documentation: https://github.com/react-native-callkeep/react-native-callkeep
• CallKeep API documentation: https://github.com/react-native-callkeep/react-native-callkeep/blob/master/docs/API.md

Frequently Asked Question

Get ready to dive into the world of React Native CallKeep and learn how to add custom text in native call notifications!