How to register a react native mobile app with the default existing URL Schema tel for telephone custom dialer

user_1840741 0
Viewed 149

Our teams goal is to have a customer dialer app on mobile phones b/c we want to mask the phone number for our users. They dont want their personal real numbers on caller ID. We have a phone service to do this behind the scenes (Twilio), but need to have our native app register as responding to the "tel" URL Schema and hooked into the React Native Deep LInk APis.

https://reactnative.dev/docs/linking#built-in-url-schemes

We have setup and followed the normal tutorials for custom URL schemas, like "myawesomeapp:/phone/+12223334444" and we can get that to open.

We want the app to register as a main dialer app though, when we do not control to setup this custom url. So anywhere there is a link for +12223334444 we want the OS to offer our app vs the main phone app when user clicks on this link.

Any tutorial on this? How to do this in Android and iOS using React Native. We started with expo default react native project, but ejected it and have full control of native settings. Thanks!

This tutorial was userful or the custom schema, but not "tel" https://rossbulat.medium.com/deep-linking-in-react-native-with-universal-links-and-url-schemes-7bc116e8ea8b

react-native deep-linking android ios
1 Answers

had the same problem. I added these intent filters to the AndroidManifest file

<intent-filter>
    <action android:name="android.intent.action.DIAL" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.CALL_BUTTON" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:mimeType="vnd.android.cursor.dir/calls" />
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <action android:name="android.intent.action.DIAL" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="tel" />
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="*ashnamoon.ir" android:path="tel/*" android:pathPrefix="/"/>
    <data android:scheme="http" android:host="*ashnamoon.ir" android:path="tel/*" android:pathPrefix="/"/>
    <data android:scheme="ashnamoon" android:host="*ashnamoon.ir" android:path="tel/*" />
  </intent-filter>

clicking on the links below will suggest my app and you can get the data with Linking API of react-native you can read about here.

<a href="https://www.ashnamoon.ir/tel/091139660">test this link https</a>
<a href="http://www.ashnamoon.ir/tel/09113966092">test this link http</a>
<a href="tel:09113966091">test this phone</a>
<a href="https://ashnamoon.ir/tel/09113966090">test this link https</a>
<a href="http://ashnamoon.ir/tel/09113966092">test this link http</a>
<a href="ashnamoon://www.ashnamoon.ir/tel/09113966093">test this link ashnamoon</a>

I add some links that helped me. this will only solve the problem on android not sure how can it be done in ios though

https://developer.android.com/reference/android/content/Intent https://android.googlesource.com/platform/packages/services/Telecomm/+/a06c9a4aef69ae27b951523cf72bf72412bf48fa/AndroidManifest.xml

user_102238990
Related