Final apk build: [https://expo.dev/artifacts/eas/vC2qFFL7sduhMY1TE25ZE3.apk]
This is a simple React Native app that allows you to search and display contacts from your device's contact list. The app utilizes the Expo Contacts API to fetch and display the contacts.
To install expo-contacts: npx expo install expo-contacts
The app consists of the following components:
App
: The main component that renders the entire application. It handles the state for search text, contacts, and selected contact. It also contains the logic for fetching contacts and filtering them based on search text. TheApp
component renders aTextInput
for searching, aFlatList
to display the contacts, and aModal
to show the details of a selected contact.
The app uses the following libraries and plugins:
react-native
: The main library for building native mobile applications using JavaScript.react
: The library for building user interfaces in JavaScript.expo-contacts
: The Expo Contacts API that provides access to the device's contact list.react-native-modal
: A library for showing modals in React Native applications.
Please ensure that you have these libraries installed before running the app.
To use the app, follow these steps:
- Install the required libraries by running
npm install
oryarn install
in the project directory. - Start the app by running
npx expo start
in the project directory. - Open the Expo client on your mobile device or use an emulator to view and interact with the app.
- To search for contacts, enter text in the search input field. The contacts will be filtered based on the entered text, and the filtered contacts will be displayed in the
FlatList
. - Tap on a contact item in the list to select it. This will open a modal displaying the selected contact's details, including the full name and phone number.
- To close the modal, tap the "Close X" button.