Contents
- 1 Access Call Logs of Android Devices
- 2 To Import CallLogs Component
- 3 Get All the Call Logs using
- 4 Get Limited Number of Call Logs
- 5 To Make a React Native App
- 6 Installation of Dependency
- 7 Permission for the Android
- 8 Code to access call logs of Android devices
- 9 To Run the React Native App
- 10 Output Screenshots
Access Call Logs of Android Devices
Hello Guys, Here is an example of how to access call logs of Android Devices from React Native App. In this example, we will see how a simple library can help you to get the call logs of the device. We are going to use CallLogs
component provided from react-native-call-log
library.
Please note with the help of this example you can only access the call logs of Android devices not of the iOS devices. You can only get state of Call like incoming and outgoing in iOS devices but you can’t get a call log because of the security concern. Apple doesn’t allow to access its application to third party apps like call logs and messages.
So let’s see how to get the call logs of Android devices from React Native Apps.
To Import CallLogs Component
import CallLogs from 'react-native-call-log';
Get All the Call Logs using
CallLogs.loadAll().then(c => console.log(c));
Get Limited Number of Call Logs
CallLogs.load(3).then(c => console.log(c));
In this example, we are making a simple list with the call logs. We are getting call logs in componentDidMount method after asking for permission then we are setting the state to render the data in the list. So let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli
command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
This will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To use CallLogs
we need to install react-native-call-log
dependency. To install this open the terminal and jump into your project using
cd ProjectName
Run the following command to install
npm install react-native-call-log --save
This command will copy all the dependency into your node_module directory.
Permission for the Android
As we are accessing the device data from our mobile application we need to add the permission in the AndroidManifest.xml file. Please visit Ask Run Time Android Permission using React Native PermissionsAndroid to know more about Permissions. Please open your AndroidManifest.xml file and add the following permission. You can find it here Yourproject -> android – > app -> src -> main -> AndroidManifest.xml
<uses-permission android:name="android.permission.READ_CALL_LOG"/>
Code to access call logs of Android devices
Now Open App.js in any code editor and replace the code with the following code.
App.js
// How to Access Call Logs of Android Devices from React Native App
// https://aboutreact.com/access-call-logs-of-android-devices/
// import React in our code
import React, {useState, useEffect} from 'react';
// import all the components we are going to use
import {
SafeAreaView,
Platform,
StyleSheet,
Text,
View,
PermissionsAndroid,
FlatList,
} from 'react-native';
// import CallLogs API
import CallLogs from 'react-native-call-log';
const App = () => {
const [listData, setListDate] = useState([]);
useEffect(() => {
async function fetchData() {
if (Platform.OS != 'ios') {
try {
//Ask for runtime permission
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
{
title: 'Call Log Example',
message: 'Access your call logs',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CallLogs.loadAll().then((c) => setListDate(c));
CallLogs.load(3).then((c) => console.log(c));
} else {
alert('Call Log permission denied');
}
} catch (e) {
alert(e);
}
} else {
alert(
'Sorry! You can’t get call logs in iOS devices
because of the security concern',
);
}
}
fetchData();
}, []);
const ItemView = ({item}) => {
return (
// FlatList Item
<View>
<Text style={styles.textStyle}>
Name : {item.name ? item.name : 'NA'}
{'\n'}
DateTime : {item.dateTime}
{'\n'}
Duration : {item.duration}
{'\n'}
PhoneNumber : {item.phoneNumber}
{'\n'}
RawType : {item.rawType}
{'\n'}
Timestamp : {item.timestamp}
{'\n'}
Type : {item.type}
</Text>
</View>
);
};
const ItemSeparatorView = () => {
return (
// FlatList Item Separator
<View
style={{
height: 0.5,
width: '100%',
backgroundColor: '#C8C8C8',
}}
/>
);
};
return (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.titleText}>
How to Access Call Logs of Android Devices
from React Native App
</Text>
<FlatList
data={listData}
//data defined in constructor
ItemSeparatorComponent={ItemSeparatorView}
//Item Separator View
renderItem={ItemView}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 10,
},
titleText: {
fontSize: 22,
textAlign: 'center',
fontWeight: 'bold',
},
textStyle: {
fontSize: 16,
marginVertical: 10,
},
});
To Run the React Native App
Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running (macOS only)
react-native run-ios
Output Screenshots
This is how to access call logs of Android devices from the React Native app. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
Hi Snehal Agrawal,
Great tutorial…
Is there any filtering option for getting calls list like (day, month, year).
Thank you, Srikanth. Not directly but you can put thee data in an array and can filter as per your requirement.
hey i am having problem to use call log package in my expo supported react native project….i can’t get permission and it is not working in expo project…….please help me out ……🙏🙏🙏🙏
I think for the expo you should dig into expo-contacts. Have a look at this post