Phone number - Add country code input to phone number field

[isagoico]

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

---

Action Performed:

1. Log in to an account that doesn't have a phone number set
2. Navigate to profile settings
3. Scroll to the phone number field

Expected Result:

There should be an input for country codes. It should default to the country code of your current location, and when clicked/tapped, should just be an input for the user to type in their country code. We don't want a big dropdown list of countries, and we don't want to use any additional third-party packages.

Actual Result:

There's no country code selector or instructions to indicate the user that he must add the country code to the phone number.

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web ✔️
iOS✔️
Android✔️
Desktop App✔️
Mobile Web✔️

Version Number: 1.0.74-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Upwork job post: https://www.upwork.com/jobs/~01ee4f567be50b24b3
View all open jobs on Upwork

---

From @aliabbasmalik8 https://expensify.slack.com/archives/C01GTK53T8Q/p1624845554159200

We can add countries' code dropdown while adding phone numbers because most of the time users did not enter their country code before the number and they have no idea what's wrong with their phone number

[MelvinBot]

Triggered auto assignment to @Luke9389 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Luke9389]

Looks like a great External issue 👍

[MelvinBot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[aliabbasmalik8]

Would like to work on this issue. We can use some components for this issue like https://www.npmjs.com/package/react-native-country-picker-modal example http://xcarpentier.github.io/react-native-country-picker-modal/
OR can make all work custom.

With a custom approach, we can save all country codes in an array and show them in the dropdown list with phone number input.

EXAMPLE WORK VIDEO:

Screen.Recording.2021-06-30.at.5.46.09.AM.mov

Thanks

[devpanther]

PROPOSAL

I have added a country code selector beside the input field for better reach on the user's side, made use of a package(react-native-country-picker-modal) that can be customized to remove and add more countries

VIDEO OF WORK BELOW: -

Screen.Recording.2021-07-01.at.8.34.45.PM.mov

[shubhamgrover93]

Hi,
Thanks for the invitation. I would like to share a solution for this task.
We can use a component of React Native (country-picker-modal) with the help of which, the user would be able to select a country. Once a particular country is selected, its country code will be displayed in the given field and then the regular phone number digits could be added.

There's an alternative to achieve this with custom-functionality. We can create a list of country codes & save it in the database. And can give that as an option for a user along with phone number input.

Please check the attached video:
https://user-images.githubusercontent.com/47270753/124427570-2f5fd600-dd89-11eb-8a36-9e8024fe92f9.mp4

Thanks.

[devpanther]

@shubhamgrover93 did you really have to use my video 😄😄

[Luke9389]

Hey contributors, thanks for the proposals thus far. You've really all been saying the same thing, which is that you want to use a package to make this list. We're not gonna go that route. I've updated the description of this issue to indicate that. I'm gonna give @aliabbasmalik8 a day or two to respond because it was his original comment that lead to the creation of this issue.