概要

react-nativeパッケージのLinking.openURLでは電話発信画面が表示されるだけなので
アプリから直接電話を発信する機能を作成する
参考にしたサイト

1. react-native-immediate-phone-callのインストール

react-native-immediate-phone-callパッケージをインストールする

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

react-nativeへのlink処理も実行する
※オートリンクを使用せずに作成する場合はlinkコマンドを実行せずに以下設定ファイルを手動で修正する
settings.gradle
build.gradle
MainApplication.java
MainActivity.java

$ react-native link react-native-immediate-phone-call

react-nativeコマンドが見つかりません等のエラーメッセージが出る場合はreact-native-cliをインストールする

$ npm install -g react-native-cli

2. AndroidManifest.xmlの修正

[プロジェクトフォルダ]/android/app/src/main/AndroidManifest.xml
アンドロイドアプリの電話発信の許可設定を追記する
※linkコマンドを実行した場合も修正する

AndroidManifest.xml

<uses-permission android:name="android.permission.CALL_PHONE" />

3. settings.gradleの修正

[プロジェクトフォルダ]/android/settings.gradle
下記記述を追記する
※linkコマンド実行時は不要

settings.gradle

include ':react-native-immediate-phone-call', ':app'
project(':react-native-immediate-phone-call').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immediate-phone-call/android')

4. build.gradleの修正

[プロジェクトフォルダ]/android/build.gradle
buildscript>dependenciesの下に下記記述を追加する
※linkコマンド実行時は不要

build.gradle

implementation project(':react-native-immediate-phone-call')

5. MainApplication.javaの修正

[プロジェクトフォルダ]/android/app/src/main/java/com/MainApplication.java
下記記述を追記する
※linkコマンド実行時は不要

MainApplication.java

  import com.github.wumke.RNImmediatePhoneCall.RNImmediatePhoneCallPackage;
  ...
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      ...
      new RNImmediatePhoneCallPackage(),
      ...
    );
  }
  ...

6. MainActivity.javaの修正

[プロジェクトフォルダ]/android/app/src/main/java/com/MainActivity.java
下記記述を追記する
※linkコマンド実行時は不要

MainActivity.java

  import com.github.wumke.RNImmediatePhoneCall.RNImmediatePhoneCallPackage;  // <--- import
  ...
  public class MainActivity extends ReactActivity {      
    ...
    @Override
    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
        RNImmediatePhoneCallPackage.onRequestPermissionsResult(requestCode, permissions, grantResults); // very important event callback
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }    
    ...
  }

7. アプリ(App.js)への記述

RNImmediatePhoneCall.immediatePhoneCallで電話発信する

App.js

import RNImmediatePhoneCall from 'react-native-immediate-phone-call';
...
RNImmediatePhoneCall.immediatePhoneCall('0123456789');
...

React Nativeアプリから直接電話発信を実行する

概要

目次