Repository navigation
Phone number - Add country code input to phone number field #3798
Description
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:
- Log in to an account that doesn't have a phone number set
- Navigate to profile settings
- 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
Activity
MelvinBot commentedon Jun 29, 2021
Triggered auto assignment to @Luke9389 (
Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.Luke9389 commentedon Jun 29, 2021
Looks like a great External issue 👍
MelvinBot commentedon Jun 29, 2021
Triggered auto assignment to @puneetlath (
External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.aliabbasmalik8 commentedon Jun 29, 2021
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-modalexample 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 commentedon Jul 1, 2021
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 commentedon Jul 5, 2021
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 commentedon Jul 5, 2021
@shubhamgrover93 did you really have to use my video 😄😄
[-]Phone number - Add country code selector to phone number field[/-][+]Phone number - Add country code input to phone number field[/+]Luke9389 commentedon Jul 5, 2021
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.
[-]Phone number - Add country code input to phone number field[/-][+][HOLD] Phone number - Add country code input to phone number field[/+]29 remaining items
Luke9389 commentedon Nov 15, 2021
Looping back around to this soon
iwiznia commentedon Dec 16, 2021
FWIW I am a 👎 on this feature:
sig5 commentedon Jan 12, 2022
Seems like this issue has been inactive for a while, I will drop in my proposal as I would like to work on it.
Proposal
API changes:
Currently we have an object containing country codes in Onyx. We can instead have a country mapping, which contains country code-specific Details (Here currency type and Country mobile code). Also, we can have
country codesaved in myPersonalDetails instead oflocalCurrency.Client Changes
We can introduce a new component
AutoCompleteTextInputwhich can listen to text changes in TextInput and filter the dropdown suggestions in a view that appears below the input.As soon as the dropdown selection is matched, the focus will be shifted to the Phone number
textInput.I will post more elaborate details if I can be working on this and it has not been taken up by anyone else.
Luke9389 commentedon Jan 19, 2022
Looping back around to this soon
Luke9389 commentedon Jan 31, 2022
I'm going to close this for the time being. I don't forsee being able to push this initiative for at least another month.