[Due for payment 2025-08-13] [$250] Import Contacts - Unable to find imported contacts in Start Chat

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.79-8
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6442417&group_by=cases:section_id&group_id=306202&group_order=asc
Email or phone of affected tester (no customers): ndk.2303+2303@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 11/iOS 18.5
App Component: Other

Action Performed:

Preconditions

• Clean installation of the app on an iOS device
• Contact permissions have been granted to the Expensify app
• Contacts are successfully imported and visible in the app (Check with FAB -> Create Expense -> Scan)

1. Open the app
2. Tap on FAB
3. Tap on Create expense > add any amount and tap on Next
4. Note that imported contacts are displayed correctly in recipient list
5. Go to LHN
6. Tap on FAB
7. Tap on Start Chat
8. Note that the imported contacts are not displayed correctly, try searching for any contact from the imported contacts from the device.

Expected Result:

The search accurately finds the contact

Actual Result:

The search can not finds the contacts which are imported from device, although they can be loaded in 'Create Expense' function.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6884291_1752209224036.Unable_To_Find_Contacts_Imported_By_Device_In_Start_Chat.mp4

ScreenRecording_07-11-2025.13-45-20_1.MP4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021944119156196629279
• Upwork Job ID: 1944119156196629279
• Last Price Increase: 2025-07-19

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Import Contacts - Unable to find imported contacts in Start Chat

What is the root cause of that problem?

We currently do not have logic for contacts on the new Chat page

What changes do you think we should make in order to solve the problem?

We need to modify the useOptions hook on the newChat page:

App/src/pages/NewChatPage.tsx

Lines 52 to 144 in 7be2292

	function useOptions() {
	const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
	const [selectedOptions, setSelectedOptions] = useState<SelectedOption[]>([]);
	const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: true});
	const [newGroupDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT, {canBeMissing: true});
	const personalData = useCurrentUserPersonalDetails();
	const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
	const {options: listOptions, areOptionsInitialized} = useOptionsList({
	shouldInitialize: didScreenTransitionEnd,
	});
	const defaultOptions = useMemo(() => {
	const filteredOptions = getValidOptions(
	{
	reports: listOptions.reports ?? [],
	personalDetails: listOptions.personalDetails ?? [],
	},
	{
	betas: betas ?? [],
	selectedOptions,
	includeSelfDM: true,
	},
	);
	return filteredOptions;
	}, [betas, listOptions.personalDetails, listOptions.reports, selectedOptions]);
	const options = useMemo(() => {
	const filteredOptions = filterAndOrderOptions(defaultOptions, debouncedSearchTerm, {
	selectedOptions,
	maxRecentReportsToShow: CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
	});
	return filteredOptions;
	}, [debouncedSearchTerm, defaultOptions, selectedOptions]);
	const cleanSearchTerm = useMemo(() => debouncedSearchTerm.trim().toLowerCase(), [debouncedSearchTerm]);
	const headerMessage = useMemo(() => {
	return getHeaderMessage(
	options.personalDetails.length + options.recentReports.length !== 0,
	!!options.userToInvite,
	debouncedSearchTerm.trim(),
	selectedOptions.some((participant) => getPersonalDetailSearchTerms(participant).join(' ').toLowerCase?.().includes(cleanSearchTerm)),
	);
	}, [cleanSearchTerm, debouncedSearchTerm, options.personalDetails.length, options.recentReports.length, options.userToInvite, selectedOptions]);
	useEffect(() => {
	if (!debouncedSearchTerm.length) {
	return;
	}
	searchInServer(debouncedSearchTerm);
	}, [debouncedSearchTerm]);
	useEffect(() => {
	if (!newGroupDraft?.participants) {
	return;
	}
	const newSelectedOptions: OptionData[] = [];
	newGroupDraft.participants.forEach((participant) => {
	if (participant.accountID === personalData.accountID) {
	return;
	}
	let participantOption: OptionData | undefined | null = listOptions.personalDetails.find((option) => option.accountID === participant.accountID);
	if (!participantOption) {
	participantOption = getUserToInviteOption({
	searchValue: participant?.login,
	});
	}
	if (!participantOption) {
	return;
	}
	newSelectedOptions.push({
	...participantOption,
	isSelected: true,
	});
	});
	setSelectedOptions(newSelectedOptions);
	}, [newGroupDraft?.participants, listOptions.personalDetails, personalData.accountID]);
	return {
	...options,
	searchTerm,
	debouncedSearchTerm,
	setSearchTerm,
	areOptionsInitialized: areOptionsInitialized && didScreenTransitionEnd,
	selectedOptions,
	setSelectedOptions,
	headerMessage,
	};
	}
	type NewChatPageRef = {
	focus?: () => void;
	};

Add a state for constacts and their setting:

    const [contactPermissionState, setContactPermissionState] = useState<PermissionStatus>(RESULTS.UNAVAILABLE);
    const [contacts, setContacts] = useState<Array<SearchOption<PersonalDetails>>>([]);
    const importAndSaveContacts = useCallback(() => {
        contactImport().then(({contactList, permissionStatus}: ContactImportResult) => {
            setContactPermissionState(permissionStatus);
            const usersFromContact = getContacts(contactList);
            setContacts(usersFromContact);
        });
    }, []);
    useContactPermissions({
        importAndSaveContacts,
        setContacts,
        contactPermissionState,
        setContactPermissionState,
    });

Then add them to defaultOptions:

const defaultOptions = useMemo(() => {
        const filteredOptions = getValidOptions(
            {
                reports: listOptions.reports ?? [],
                personalDetails: (listOptions.personalDetails ?? []).concat(contacts),
            },
            {
                betas: betas ?? [],
                selectedOptions,
                includeSelfDM: true,
            },
        );
        return filteredOptions;
    }, [betas, listOptions.personalDetails, listOptions.reports, selectedOptions]);

We can move this logic to separe hook and use on other pages

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021944119156196629279

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)

[aybanda]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users can't find their phone contacts when starting a new chat. The "Start Chat" page only shows people from the server, but not contacts from their phone's contact list.

What is the root cause of that problem?

The NewChatPage doesn't connect to the user's phone contacts. While the app has contact import features that work in other places (like when adding people to expense reports), this feature isn't enabled on the Start Chat page. The existing contact system (contactImport, getContacts, useContactPermissions) works in MoneyRequestParticipantsSelector but isn't integrated into the NewChatPage.

What changes do you think we should make in order to solve the problem?

1. Add contact import to the Start Chat page - Use the existing contact system that already works in other parts of the app
2. Show an "Import Contacts" button - When users haven't given permission to access their contacts
3. Ask for permission - Show a popup asking users if they want to share their contacts
4. Display imported contacts - Show phone contacts alongside existing contacts in the search results

Technical implementation:

• Extend the useOptions hook in NewChatPage to include contact management
• Add ContactPermissionModal for permission handling
• Modify the defaultOptions to include device contacts with server contacts
• Add "Import Contacts" button to footer when permission not granted

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Basic Tests:

• Test that the "Import Contacts" button appears when needed
• Test that contacts show up in search results after import
• Test that the permission popup works correctly
• Test that imported contacts can be selected for chat

Edge Cases:

• Test what happens when user denies contact permission
• Test with empty contact list
• Test with very large contact lists
• Test on both iOS and Android
• Test that imported contacts don't duplicate existing server contacts

What alternative solutions did you explore? (Optional)

• Server-side contact sync: Too complex and privacy concerns
• Separate contacts tab: Would make the interface confusing
• Manual contact entry: Doesn't solve the problem of finding existing contacts

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @aybanda! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[aybanda]

Contributor details
Your Expensify account email: jsaj2024@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0128101ae814719134