Detección de llamadas entrantes en React Native

Compartir

Aunque soy principiante en React Native, he tenido que comenzar una aplicación para la detección de llamadas y su estado en el dispositivo y que así sean registradas a través de una API.

Para realizar esto, usaremos la siguiente librería en nuestro proyecto: react-native-call-detection. Con Node package manager (npm):

npm install react-native-call-detection

Para Android debemos asegurarnos de que los siguientes permisos sean requeridos al dispositivo en AndroidManifest.xml

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

Importamos el paquete en nuestro componente de la siguiente forma:

import CallDetectorManager from 'react-native-call-detection';

Una vez que tenemos todo esto realizado, simplemente tal como aparece en la documentación usamos las siguientes funciones. Como observamos, tenemos la función para comenzar a escuchar llamadas y otra para parar la escucha.

startListenerTapped() {
    this.callDetector = new CallDetectorManager((event, phoneNumber)=> {
    // For iOS event will be either "Connected",
    // "Disconnected","Dialing" and "Incoming"
 
    // For Android event will be either "Offhook",
    // "Disconnected", "Incoming" or "Missed"
    // phoneNumber should store caller/called number
 
 
    if (event === 'Disconnected') {
    // Do something call got disconnected
    }
    else if (event === 'Connected') {
    // Do something call got connected
    // This clause will only be executed for iOS
    }
    else if (event === 'Incoming') {
    // Do something call got incoming
    }
    else if (event === 'Dialing') {
    // Do something call got dialing
    // This clause will only be executed for iOS
    }
    else if (event === 'Offhook') {
    //Device call state: Off-hook.
    // At least one call exists that is dialing,
    // active, or on hold,
    // and no calls are ringing or waiting.
    // This clause will only be executed for Android
    }
    else if (event === 'Missed') {
    	// Do something call got missed
    	// This clause will only be executed for Android
  }
},
false, // if you want to read the phone number of the incoming call [ANDROID], otherwise false
()=>{}, // callback if your permission got denied [ANDROID] [only if you want to read incoming number] default: console.error
{
title: 'Phone State Permission',
message: 'This app needs access to your phone state in order to react and/or to adapt to incoming calls.'
} // a custom permission request message to explain to your user, why you need the permission [recommended] - this is the default one
)
}
 
stopListenerTapped() {
    this.callDetector && this.callDetector.dispose();
}

Por defecto la lectura el número de la llamada viene desactivado. Debemos cambiarlo a true. Ya así podríamos usar la variable phoneNumber para mostrar el número.

true, // if you want to read the phone number of the incoming call [ANDROID], otherwise false

Ya en función de cada evento podemos hacer lo que queramos; llamar a una API, mostrar esos datos en pantalla, etc. Podemos hacer uso de esto bien creando un botón a través del cual llamamos a la función por ejemplo o llamando a la función directamente a través de un ciclo de vida del componente como componentDidMount en mi caso.

Personalmente, he creado una función para pedir los permisos al usuario, así hago la comprobación de los permisos antes de comenzar a escuchar llamadas.

pedirPermisos = async () => {
  try {
    const permissions = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
      PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE,
    ]);
    console.log('Permisos:', permissions);
  } catch (err) {
    console.warn(err);
  }
};

En mi caso la aplicación de momento sólo ha sido montada en Android. Como veis hay eventos para iOS y otros para Android.

Y esto es todo; así podréis obtener los distintos estados del teléfono y número!

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies