phone number is not getting

[FebinPrimeCrown]

import React, { useEffect, useState } from 'react';
import { PermissionsAndroid, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import CallDetectorManager from 'react-native-call-detection';

const App = () => {
const [featureOn, setFeatureOn] = useState(false);
const [incoming, setIncoming] = useState(false);
const [number, setNumber] = useState(null);
const [callLog, setCallLog] = useState(null); // New state to hold call log messages

useEffect(() => {
askPermission();
}, []);

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

const startListenerTapped = () => {
setFeatureOn(true);
callDetector = new CallDetectorManager(
(event, incomingNumber) => {
console.log(event, incomingNumber);
if (event === 'Disconnected') {
// Do something call got disconnected
setIncoming(false);
setNumber(null);
setCallLog(Call disconnected);
} else if (event === 'Incoming') {
// Do something call got incoming
setIncoming(true);
setNumber(incomingNumber || 'Unknown'); // Use 'Unknown' if incomingNumber is empty
setCallLog(Incoming call from ${incomingNumber || 'Unknown'});
} 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.
setIncoming(true);
setNumber(incomingNumber || 'Unknown'); // Use 'Unknown' if incomingNumber is empty
console.log(Call picked from ${incomingNumber});
setCallLog(Call picked from ${incomingNumber || 'Unknown'});
// Clear the "Incoming call" message once call is picked
setIncoming(false);
} else if (event === 'Missed') {
// Do something call got missed
if (incomingNumber === number) {
console.log(Missed call from ${incomingNumber});
setCallLog(Missed call from ${incomingNumber || 'Unknown'});
// Clear the "Incoming call" message once call is missed
setIncoming(false);
}
} else if (event === 'Declined') {
// Do something call got declined
setIncoming(false);
setNumber(incomingNumber || 'Unknown'); // Use 'Unknown' if incomingNumber is empty
console.log(Call declined from ${incomingNumber});
setCallLog(Call declined from ${incomingNumber || 'Unknown'});
}
},
true,
() => {},
{
title: 'Phone State Permission',
message:
'This app needs access to your phone state in order to react and/or to adapt to incoming calls.',
},
);
};

const stopListenerTapped = () => {
callDetector && callDetector.dispose();
setFeatureOn(false);
setIncoming(false);
setCallLog(null); // Clear call log when stopping listener
};

return (

<Text style={{ color: 'black', fontSize: 26, fontWeight: '700' }}>Call Detection
<Text style={[styles.text, { color: 'black' }]}>Service
<TouchableHighlight
style={{ borderRadius: 50 }}
onPress={featureOn ? stopListenerTapped : startListenerTapped}>
<View
style={{
width: 200,
height: 200,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: featureOn ? 'blue' : '#eb4034',
borderRadius: 50,
}}>
{featureOn ? ON : OFF}


{callLog && (
<Text style={{ fontSize: 16, color: 'black', marginTop: 10 }}>
{callLog}

)}
{incoming && (
<Text style={{ fontSize: 20, color: 'red', marginTop: 20 }}>
{number ? Incoming call from ${number} : Incoming call}

)}

);
};

export default App;

const styles = StyleSheet.create({
body: {
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
text: {
padding: 20,
fontSize: 20,
fontWeight: '700',
color: '#fff',
},
});