Create a Phonebook and Call App using React-Native

// App.js
import React from 'react';
import { NavigationContainer } 
	from '@react-navigation/native';
import { createStackNavigator }
	from '@react-navigation/stack';
import ContactsScreen
	from './ContactsScreen';

const Stack = createStackNavigator();

const App = () => {
	return (
		<NavigationContainer>
			<Stack.Navigator
				initialRouteName="ContactsScreen">
				<Stack.Screen
					name="ContactsScreen"
					component={ContactsScreen} />
			</Stack.Navigator>
		</NavigationContainer>
	);
};

export default App;

// ContactsScreen.js
import React, { useEffect, useState } from 'react';
import {
	View, Text, FlatList,
	TouchableOpacity, TextInput,
	Pressable
} from 'react-native';
import {
	requestContactsPermission,
	makeCall, filterContacts
} from './ContactsFunctions';

const ContactsScreen = () => {
	const [contacts, setContacts] = useState([]);
	const [filteredContacts, setFilteredContacts] = useState([]);
	const [searchQuery, setSearchQuery] = useState('');

	useEffect(() => {
		requestContactsPermission(setContacts, setFilteredContacts);
	}, []);

	const handleSearch = () => {
		filterContacts(contacts, searchQuery, setFilteredContacts);
	};

	const renderItem = ({ item }) => (
		<TouchableOpacity
			onPress={() => makeCall(item)}
			style={{ borderBottomWidth: 1, borderColor: '#228B22' }}
		>
			<View
				style={{
					padding: 20,
					backgroundColor: 'white',
				}}
			>
				<Text style=
					{
						{ color: '#228B22' }}>
					{item.name}: {item.phoneNumbers
						&& item.phoneNumbers.length > 0 &&
						item.phoneNumbers[0].number}
				</Text>
			</View>
		</TouchableOpacity>
	);

	return (
		<View>
			<View style=
				{
					{
						flexDirection: 'row',
						alignItems: 'center',
						margin: 10
					}
				}>
				<TextInput
					style=
					{
						{
							flex: 1, height: 40,
							borderColor: '#228B22',
							borderWidth: 1, marginRight: 10,
							paddingLeft: 10, color: '#228B22'
						}
					}
					placeholder="Search"
					value={searchQuery}
					onChangeText={
						(text) =>
							setSearchQuery(text)
					}
				/>
				<Pressable
					style={({ pressed }) => [
						{
							backgroundColor: pressed ? '#1e8449' : '#2ecc71',
							padding: 10,
							borderRadius: 5,
						},
					]}
					onPress={handleSearch}
				>
					<Text style=
						{
							{
								color: 'white'
							}
						}>
						Search
					</Text>
				</Pressable>
			</View>
			<FlatList
				data={filteredContacts}
				renderItem={renderItem}
				keyExtractor={(item) => item.id}
			/>
		</View>
	);
};

export default ContactsScreen;

// ContactsFunctions.js
import * as Contacts from 'expo-contacts';
import { Linking, Alert } from 'react-native';

// Add dummy contacts for testing
const dummyContacts = [
	{
		id: '1',
		name: 'Geek 1',
		phoneNumbers: [
			{
				number: '123-456-7890',
			},
		],
	},
	{
		id: '2',
		name: 'Geek 2',
		phoneNumbers: [
			{
				number: '987-654-3210',
			},
		],
	},
	{
		id: '3',
		name: 'Geek 3',
		phoneNumbers: [

		],
	},
	// Add more dummy contacts as needed
];

export const requestContactsPermission =
	async (setContacts, setFilteredContacts) => {
		try {
			const { status } =
				await Contacts.requestPermissionsAsync();
			// Comment below two lines after testing the contacts
			setContacts(dummyContacts);
			setFilteredContacts(dummyContacts);

			if (status === 'granted') {
				setContacts(sortedContacts);
				setFilteredContacts(sortedContacts);

			} else {

				console.log('Contacts permission denied');
			}
		} catch (error) {
			console
				.error('Error requesting contacts permission:', error);
		}
	};

export const fetchContacts =
	async (setContacts, setFilteredContacts) => {
		try {
			// Use dummyContacts for testing
			setContacts(dummyContacts);
			setFilteredContacts(dummyContacts);
		} catch (error) {
			console.error('Error fetching contacts:', error);
		}
	};

export const makeCall = (contact) => {
	const phoneNumber =
		contact.phoneNumbers
			&&
			contact.phoneNumbers.length > 0
			? contact.phoneNumbers[0].number
			: null;

	if (phoneNumber) {
		const url = `tel:${phoneNumber}`;
		Linking.openURL(url);
	} else {
		Alert.alert('No phone number available for this contact.');
	}
};

export const filterContacts =
	(contacts, searchQuery, setFilteredContacts) => {
		const filtered = contacts.filter(
			(contact) =>
				contact.name.toLowerCase()
					.includes(searchQuery.toLowerCase()) ||
				(contact.phoneNumbers &&
					contact.phoneNumbers.length > 0 &&
					contact.phoneNumbers[0].number.includes(searchQuery))
		);

		setFilteredContacts(filtered);
	};