React nativeでios/androidから発信する方法 #iOS

React nativeでios/androidから発信する方法

React nativeでios/androidから発信する方法を調べる機会がありましたので、調べた情報をここにまとめておこうと思います。

参考にしたサイト

検索しましたが、今現在でQiitaで記載されている記事を見つけることができず、こちらの記事を中心に参考にしました。
React Nativeで電話をかける方法

そこで２パターンの発信方法がありましたので、以下に記載します

発信機能の構築　パターン①：Linkingを用いる方法

Linkingを用いて電話をかけます
まずは実際のコード例を以下に記載します。

CallActivity.jsx

import { Linking } from 'react-native';
・・・
//変数「inputText」はTextInputを用いるなどして入力式にするか、固定値の場合はハードコーディングなどで置き換えて考えてください。
const inputText = '09012345678';
<TouchableOpacity
   style={}
   onPress={() => {
     const phoneNumber = `tel:${inputText}`;
     Linking.openURL(phoneNumber);
   }}
>
  <Text style={}>電話をかける</Text>
</TouchableOpacity>
・・・

STEP1

Linkingをimportします。

STEP2

電話番号の文字列の前に「tel:」を結合します。

※参考サイトではiosは「tel:」、androidは「telprompt:」になるよう端末のOSで条件分岐して記載しておりましたが、私の環境ではandroid側が「：telprompt」ではエラーになってしまいました。
android側でも「tel：」を利用したところ無事動作したので、今回はどちらのOSも「tel:」を採用しています。
皆さんも実装してみて、動作に合わせてご利用ください。

STEP3

Linking.openURL(作成した文字列);で発信!!
これで発信されます!

発信結果

iosの場合、発信確認のダイアログが出て、はいを選択後に発信されます。
androidの場合、発信画面(電話アプリの画面)が電話番号が表示された状態で開かれ、あとは通常通り発信ボタンを押すと発信されます。

発信機能の構築　パターン②：react-native-phone-callパッケージを用いる方法

react-native-phone-callパッケージを用いて電話をかけます
まずは実際のコード例を以下に記載します。

CallActivity.jsx

import call from 'react-native-phone-call';

const makeCall = (number) => {
  const args = {
    number: number,
    Prompt: true,
  };
  call(args).catch(console.error);
};

//変数「inputText」はTextInputを用いるなどして入力式にするか、固定値の場合はハードコーディングなどで置き換えて考えてください。
const inputText = '09012345678';

<TouchableOpacity
   style={}
   onPress={()=> this.makeCall(inputText)}
>
  <Text style={}>電話をかける</Text>
</TouchableOpacity>

STEP1:パッケージをインストール

$ npm install --save react-native-phone-call

STEP2:インポート+メソッドを作成

CallActivity.jsx

import call from 'react-native-phone-call';

const makeCall = (number) => {
  const args = {
    number: number,
    Prompt: true,
  };
  call(args).catch(console.error);
};

STEP3:onPressメソッドで呼び出す

CallActivity.jsx

//変数「inputText」はTextInputを用いるなどして入力式にするか、固定値の場合はハードコーディングなどで置き換えて考えてください。
const inputText = '09012345678';
<TouchableOpacity
   style={}
   onPress={()=> this.makeCall(inputText)}
>
  <Text style={}>電話をかける</Text>
</TouchableOpacity>

発信結果

困ったこと

本来は、onPressを呼んでから、すぐ発信するようにしたかったのですがその方法が今回見つかりませんでした。もしご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

実機でのデバッグ方法

こちらのサイトが参考になるかと思います!
Expo環境構築
※expと記載ありますが、私の場合はexpoで動作しました。

まとめ

・パターン1,2どちらを使うか決めましょう
・パッケージをインストールしましょう
・発信したい電話番号を取得orハードコーディングしましょう
・onPressで電話をかけましょう

React nativeでios/androidから発信する方法