[Tracking] Import phonebook contacts into New Expensify

[roryabraham]

Proposal: Import phonebook contacts into New Expensify

Strategy The most important metric we want to see grow in the coming months is new user acquisition :chart_with_upwards_trend:. To facilitate that we need to invest in features that streamline viral user growth and make it easier to pull new users into the app. :busts_in_silhouette:

Problem If you want to use the Expensify Classic app to invite your team or your boss to Expensify, it’s very easy. You sign up, scan a receipt, and an inbox task will appear asking who you want to send it to. If you click on that, it will open your phone’s contact book and allow you to select the contact(s) that you want to invite to Expensify. You can invite people you know in just a few taps, without leaving the app.

There are a number of other places throughout Expensify Classic where you can easily invite people to Expensify, such as when submitting reports.

Meanwhile, in New Expensify, the first few steps of inviting new users are arguably more streamlined. You immediately scan a receipt, and on the very next page you’ll be asked who you want to share it with. However, at that stage, you need to leave the app to find their email or phone number from some other source and manually type or copy/paste it into NewDot. This introduces friction in a critical viral growth moment.

Solution Let’s close the gap on one of the final pieces of feature parity between Expensify Classic (mobile) and NewDot, by importing contacts from your phonebook :closed_book: into New Expensify. This will streamline the process of inviting people you already know into Expensify. Let’s show these imported contacts in any page where we invite new users (start chat, workspace invite, request money participants page, etc…).

All these pages are already set up to invite new users to Expensify via their email or phone number, so the only requirement is to import that information from the contacts app (after obtaining the user’s permission to do so). Because of that, this project is completely front-end and self-contained. That means that after we get through an initial high-level design phase, it can be implemented entirely by external contributors.

For UI inspiration, WhatsApp 📞 shows imported contacts in an “Invite to WhatsApp” section.

[roryabraham]

First predesign questions:

• How should we show these?

  • I suggest we just show a new section in selection lists titled Invite to Expensify, styled the same as the existing Recents and Contacts sections:
  

• Should we try to support web?

  • I suggest no (for the V1, anyways). There's an experimental ContactsManager web API, but it only works on Android atm. Furthermore, it doesn't support importing all contacts and displaying them using our own UI. Instead, it's more like what we have in OldApp that pulls up the native contacts app and allows you to select contacts to import.

• Should we try to support desktop?

  • I suggest yes. It may be a bit involved to set up, but fortunately our needs should be pretty simple. It might look something like this:
    • Use the same Swift code to access contacts on macOS and iOS. CNContactsStore works on both.
    • Use the same C+code on iOS and macOS to create C++ bindings for the swift code
    • (here's where things start to differ) on desktop, create a Node.js addon with JS bindings to the C++/Swift code
    • Require the Node.js addon in desktop/main.ts
    • Use the Electron context bridge to provide a renderer process interface for the Node.js code that can be used to access contacts

• Should we use a library for this?

  • There are a couple of options, such as react-native-contacts and expo-contacts. However, because the native code should be quite simple and none of the existing solutions support (or would be expected to support) Electron, I suggest we just create our own small library for this.

[roryabraham]

posted first predesign (saving library/implementation details for a 2nd predesign):

https://expensify.slack.com/archives/C01GTK53T8Q/p1724440169163019

[trjExpensify]

Posted here, but I don't think this is a project for #wave-collect.

[roryabraham]

Moved to #f1-25june2025

[roryabraham]

Predesigns two and three:

• https://expensify.slack.com/archives/C01GTK53T8Q/p1724788943149429
• https://expensify.slack.com/archives/C01GTK53T8Q/p1725403445145239

[roryabraham]

Summarizing all of our predesign decisions and getting this ready for handoff:

• When revealing users imported from contacts which aren't yet an Expensify contact, we'll show them just like any other user. We won't draw any additional attention to the fact that they don't yet have an Expensify account, and won't introduce a new Invite section to selection lists
• Every time SelectionList mounts, we'll:
  • verify we have permission to access contacts.
    • If the user has given permission to access contacts, proceed to the next step.
    • unless the user has explicitly denied permission, request permission to access contacts, then proceed to the next step
  • import all phonebook contacts, include them in the SelectionList result set
• If a user has explicitly denied permission to access contacts, and have entered a search query which yields no results, then instead of simply showing No results found, we would show: Not seeing who you're looking for? Want to [import your phonebook contacts](link)?
• Only iOS and Android are in-scope for the V1. I think the V2 can target desktop as well, maybe web in a (distant) V3 if the web API improves.
• We should show a user's contact photo when searching for them and they don't yet an Expensify account.
• If they do have an Expensify account, but their Expensify account is using a default avatar, and your phonebook contact has an avatar for them, then we should show your phonebook avatar for the user rather than their default Expensify avatar
• Let's also roll-our-own small amount of native code for this directly in E/App rather than using or publishing a separate package. Let's use Nitro Modules for this native code.

[roryabraham]

last slack update: https://expensify.slack.com/archives/C035J5C9FAP/p1726770468190059?thread_ts=1725380343.339199&cid=C035J5C9FAP

[perunt]

👋🏻

[s77rt]

You can use https://github.com/s77rt/react-native-contacts (a Turbo Module) for reference

[blimpich]

@perunt how is the PR going? Can you you give us an update?

[perunt]

hey @blimpich, we just finished fixing the Nitro issue (the library we use for this module). Tomorrow, I'm going to show some metrics about it and move that module to the Expensify repo

[blimpich]

Sounds great! Thank you for the update 👍

[perunt]

You can use https://github.com/s77rt/react-native-contacts (a Turbo Module) for reference

Thanks for the link! I'll use it for an approximate comparison between NitroModule and TurboModule

[perunt]

While this isn't the perfect comparison since both modules are built differently under the hood and could probably be optimized further, it gives us a decent starting point. I ran some tests importing around 1,100 contacts - did it 20 times with 10-second breaks between runs to get the average times. Maybe we don't have huge differences, but we definitely see the cost of overhead.

iPhone XR	Samsung S21

Nitro is running about 30% faster on iOS and 10-20% faster on Android compared to TurboModules

Since we're getting responses under 100ms, it's actually faster than receiving data from the internet (at least for importing 1k contacts) - it allows us to work without using fetch from the backend (in case when we save it).

[mrousavy]

woohooooo!!! huge 🔥

[shubhamguptadream11]

@perunt Can you share the nitro module repo link where you did the benchmarks.

[melvin-bot[bot]]

📣 @shubhamguptadream11! 📣 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>

[perunt]

@shubhamguptadream11 this was my sandbox, link I will update and clean it later, and add screenshots to that repo

[perunt]

I'm adding the last features - 'use photo from contact book for contacts from Expensify that don't have an avatar.' The second ability is that when you pick a user from contacts, you create this user for the Expensify account. Due to our current structure, it's a bit tricky to use the photo for creating this contact on the next screen. I mean to port this photo. Apart from this, everything is working. So I'm starting to think if we need to deliver it in one PR or maybe spread it. I know that if you check the amount of code, it would be around 50k lines, but I want to say that 95% is auto-generated code. I'll also mention this in the PR for reviewer. What do you think? @blimpich (I mean deliver it as one PR or spread it)

[blimpich]

@perunt I think splitting it up is a good idea. I think if that functionality is particularly tricky, it's preferable to break it up so that we can review and test separately. We would just use one of the randomly picked default avatars instead of the contact photo in the first PR correct?

[blimpich]

Not overdue. I see recent progress made on the PR. @perunt any updates to share? Did you decide to split the functionality into multiple PRs like you suggested here?

[perunt]

@blimpich, it's good for review. We may need to change the view of two buttons. I'll ping the design team

[DylanDylann]

@perunt @blimpich Do we support this feature on mWeb?

[melvin-bot[bot]]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.