thegamenicorus / react-native-phone-input Goto Github PK
View Code? Open in Web Editor NEWPhone input box for React Native
Home Page: https://www.npmjs.com/package/react-native-phone-input
License: MIT License
Phone input box for React Native
Home Page: https://www.npmjs.com/package/react-native-phone-input
License: MIT License
When installing the package on RN0.47.0 the app hangs up. This may be because of the PropType. The package is still using
import React, {
Component,
PropTypes,
} from 'react'
while on the latest version of RN it is now separated.
import PropTypes from 'prop-types';
They both do the same - open countries and pick one country. What's the difference?
I searched and found there is no way to put a blank space between country code and actual phone number.. I want (+xx xxxxxxxxxx) but it allows me to go with this (+xxxxxxxxxxxx)..
Looks like lodash is missing from package.json deps
I can not add a placeholder for the TextInput
How to get call back when user types on it
Your react-native-country-picker-modal
breaks whole application
import PhoneInput from 'react-native-phone-input';
import CountryPicker from 'react-native-country-picker-modal';
And you get
error: bundling failed: Error: EISDIR: illegal operation on a directory, read
at Object.fs.readSync (fs.js:675:18)
at Object.readSync (/Users/user/app/node_modules/graceful-fs/polyfills.js:138:28)
at tryReadSync (fs.js:540:20)
at Object.fs.readFileSync (fs.js:583:19)
at Module._readSourceCode (/Users/user/app/node_modules/metro/src/node-haste/Module.js:206:29)
at Module._getCacheProps (/Users/user/app/node_modules/metro/src/node-haste/Module.js:398:29)
at Module._readFromTransformCache (/Users/user/app/node_modules/metro/src/node-haste/Module.js:359:29)
at Module.readCached (/Users/user/app/node_modules/metro/src/node-haste/Module.js:346:19)
at /Users/user/app/node_modules/metro/src/node-haste/Module.js:327:29
at Generator.next (<anonymous>)
Hi,
That would be quite practical to have some of the example in a Snack Expo
(https://snack.expo.io/) so we can give it a try painlessly.
Thanks for your work.
I'm getting this warning in the console of xcode when clicking on the input in my simulator (can't test it on a real phone at this moment)
Can't find keyplane that supports type 5 for keyboard iPhone-PortraitTruffle-PhonePad; using 7080300353163279913_PortraitTruffle_iPhone-Complex-Pad_Default
FAIL artifacts/index.ios.spec.js
โ Test suite failed to run
SyntaxError: Unexpected token / in JSON at position 38
at Object.parse (native)
at Runtime.requireModule (node_modules/jest-runtime/build/index.js:325:61)
at Object.<anonymous> (node_modules/react-native-phone-input/lib/phoneNumber.js:3:17)
at Object.<anonymous> (node_modules/react-native-phone-input/lib/index.js:15:18)
Is there anyway for the use to confirm that they are done typing the number?
how to use placeholder as i am trying by offical docs but without luck
<PhoneInput textProps={{placeholder:'Driver Login'}} ref={ref => { this.phone = ref; }} />
if (!this._countryInput.isValidNumber()) {
}
If I call is valid number it is giving exemption like
'Exception was thrown: Error: The string supplied did not seem to be a phone number'
How to use these function without refs? My rn-phone-input is functional component. Your examples are class components. I don't need class components when I can use functional ones. So how do I utilize these function in functional components?
https://github.com/thegamenicorus/react-native-phone-input#functions
I don't need the entire list..
Is it possible to pass in an array of countries to show in the picker? E.g. us, gb, fr
By formatter I mean a package that can format country code and phone number correctly for if not all at least for most countries?
Does it exist?
Hi ๐ ,
I appreciate your effort and struggle to develop this library. I just wanted to limit the input of phone number.
I didn't know is there any way exist to do this but I make some changes in index.js
on line number 196.
<View style={{ flex: 1, marginLeft: this.props.offset || 10 }}>
<TextComponent
ref={ref => {
this.inputPhone = ref;
}}
editable={!disabled}
autoCorrect={false}
style={[styles.text, this.props.textStyle]}
onChangeText={text => {
this.onChangePhoneNumber(text);
}}
keyboardType="phone-pad"
underlineColorAndroid="rgba(0,0,0,0)"
value={formattedNumber}
{...this.props.textProps}
// Custom add this to limit the number input
maxLength={13}
/>
</View>
So, would you like to add this feature or is this already exist then kindly enlighten me about this.
Thank you
Happy Code! ๐
I'm using ReactNative's StyleSheet
to build styles, https://facebook.github.io/react-native/docs/stylesheet.html, which convert style objects into numerical ids that are used to look up the style from a global stylesheet. When using with this library, the styles are passed along just fine, but I get a warning: Warning: Failed prop type: Invalid prop 'textStyle' of type 'number' supplied to 'PhoneInput', expected 'object'
.
This should be a fairly trivial fix, just updating the PropTypes to expect a number or an object should do the trick and get rid of the warning.
i want to add disableFullscreenUI property to phoneInput tag. when i add this property to your source codes for textComponent tag, this property works. please add this property to your codes as following:
<TextComponent
ref={ref => {
this.inputPhone = ref;
}}
editable={!disabled}
autoCorrect={false}
style={[styles.text, this.props.textStyle]}
onChangeText={text => {
this.onChangePhoneNumber(text);
}}
keyboardType="phone-pad"
disableFullscreenUI={true}
underlineColorAndroid="rgba(0,0,0,0)"
value={formattedNumber}
{...this.props.textProps}
/>
I've tried setting ref on Phoneinput but focus() does not seem to exist. Also tried passing ref into the TextComponent by using textProps = {{ref:'phoneInput'}} or textProps = {{ref='phoneInput'}}. Neither of which works.
Thanks
I got a prop-types warning on React Native 0.49.1, when I dug further, the react-native-phone-input library was throwing the error.
npm
and yarn
give the same issue. It says it's installed version 0.1.9, but when I look in the code, it's not consistent with the Git Repo here, where prop-types is fixed.
If you look at the package NPM/Yarn downloads, you can see the code is outdated:
https://registry.npmjs.org/react-native-phone-input/-/react-native-phone-input-0.1.9.tgz
yarn add https://github.com/thegamenicorus/react-native-phone-input.git
fixes my issue, but wanted to let you know.
I am passing a custom country list to the component that is based off of the full country list. Basically, I am filtering it down to the countries I want to support and mapping the country name to ${country.name} (+${country.dialCode})
.
Currently, if you have a ref to the component you can call instance.getAllCountries()
. This doesn't work in the case described though, because the function needs to be passed to <PhoneInput>
as a prop prior to instantiation.
react-native-country-picker-modal
has a similar country list API and exports getAllCountries
here.
When country is switched to another country that has the same international prefix, say USA and Canada, then when you start typing the phone number, the flag switches back to the first one. This is due to this code in index.js
:
updateFlagAndFormatNumber(number, actionAfterSetState = null) {
const { allowZeroAfterCountryCode, initialCountry } = this.props;
let iso2 = initialCountry;
let phoneNumber = number;
if (number) {
if (phoneNumber[0] !== "+") phoneNumber = `+${phoneNumber}`;
phoneNumber = allowZeroAfterCountryCode
? phoneNumber
: this.possiblyEliminateZeroAfterCountryCode(phoneNumber);
iso2 = PhoneNumber.getCountryCodeOfNumber(phoneNumber);
}
this.setState({ iso2, formattedNumber: phoneNumber }, actionAfterSetState);
}
This in turn calls PhoneNumber.getCountryCodeOfNumber
from phoneNumber.js:
getCountryCodeOfNumber(number) {
const dialCode = this.getDialCode(number);
const numeric = this.getNumeric(dialCode);
const countryCode = Country.getCountryCodes()[numeric];
// countryCode[0] can be null -> get first element that is not null
if (countryCode) {
return _.first(countryCode.filter(iso2 => iso2));
}
return '';
}
You will notice that the first element (in this case US) gets returned. We should allow for overlapping prefixes.
We want to set it to be the users current location.
What example did you provide? There is no ModalPickerImage
How do open countries modal?
The documentation mentions a getFlag
function, but subclassing the component & overriding it doesn't do anything. This is because the render
method doesn't call getFlag
, instead inlining the implementation:
<Image
source={Flags.get(iso2)}
style={[styles.flag, this.props.flagStyle]}
onPress={this.onPressFlag}
/>
We should change this to:
<Image
source={this.getFlag(iso2)}
style={[styles.flag, this.props.flagStyle]}
onPress={this.onPressFlag}
/>
or, better yet, convert this into a prop
that can be passed in without subclassing.
<PhoneInput keyboardType={'numeric'}
initialCountry='in'
value='+91'
ref={(ref) => {this.phone = ref;}}
onChangePhoneNumber={(number) => {this.setState({mobile_no: number})}}
/>
If I try to clear the phone input completely , the number is getting cleared and only the flag is resetting. And if I again choose the same country, the country code (or dial code) is not showing up.
Is there any way I fix this?
Hy, is there a way to close keyboard after enter phone number on iOS platforms? I did tried to add returnKeyType
props of react native textinput with its value done
but had no luck. Can we show done
button or something on keyboard while entering phone number?
This is an excellent project. It would be wonderful if you could add the onBlur configuration. Sometimes the phone number input field needs to be validated lively, e.g. length, numbers only, etc. Thanks very much.
With my project I need to disable component with certain conditions, but component have no this prop by default. I think, you should add prop editable
for component, which disable onPress for CountryPicker and makes TextInput uneditable.
Now I can do it only with props
onPressFlag={() => false}
textProps={{ editable: false }}
for PhoneInput component, but it's crutch!
Hi there.
I have some problem with focusing phone input when needed. My code is following:
<PhoneInput ref={ref => (this.phoneRef = ref)} onChangePhoneNumber={this.handleMobileChange.bind(this)} />
And when I call this.phoneRef.focus()
I get undefined. Please help to find a solution. Thanks
would please add autoFocus?
I can't make the PhoneInput focus on the next TextInput because it's not reading the onSubmitEditing prop that is visible on other react native inputs. Is there any fix to that? or some workaround? Thanks.
If someone is typing the number with country code, I would like to get the country object using which you used to update the flag.
How can i achieve that.
Sometimes users enter their phone with a leading zero after the country code.
Can we add an option to ignore it in getValue? It is hard to do after since it is mixed in with the country code.
when using in RTL layout, the flag is on the wrong side
Might be related to #4, but it is impossible to insert a phone number starting with a leading 0.
More specifically +39036384331 is a perfectly valid Italian phone number but it is currently impossible to insert it.
<PhoneInput style={{ width: '92%' }} ref={(ref) => phonePicker = ref} onChangePhoneNumber={(number) => { if (number) { let isNumberValid = phonePicker && phonePicker.isValidNumber(); // this.setState({ isNumberValid, number }); if (this.props.onChangePhoneNumber) { this.props.onChangePhoneNumber(number, isNumberValid); } } }} />
After change one or more input number throw Exception
Malformed calls from JS: field sizes are different.
[[38,38,38,20,41,41,41,41,41,41,41,41,41,41,41,41,27,27,27,27,27,27,20,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,41,20,27,27,27,27,27,27,38,40,40,40,40,27,27,27,27,38,6,6,0,54,54,54,54,54,54,54,54,54,54,54,54,54,54],[6,6,6,0,10,2,2,2,11,2,2,2,11,11,11,11,1,1,1,1,1,1,1,10,2,2,11,11,11,17,13,10,2,2,2,11,2,2,2,11,11,11,11,11,1,1,1,1,1,1,1,8,1,1,1,1,1,1,1,1,4,0,1,1,3,3,3,3,3,3,0,3,3,3,3,3,3,0],[[58,"RCTSinglelineTextInputView",{"mostRecentEventCount":1}],[57,"RCTImageView",{"source":[{}]}],[58,"RCTSinglelineTextInputView",{"text":"+"}],[20,29],[17,20],[16,17],[5,16],[16],[18,17],[19,18],[5,19],[19],[18],[17],[20],[1],[1],[1],[1],[1],[1],[31],[1,23],[2,1],[3,2],[3],[2],[1],[1],[5],[25,82],[22,25],[21,22],[5,21],[21],[23,22],[24,23],[5,24],[5],[24],[23],[22],[25],[32],[1],[1],[1],[1],[1],[1],[58],[1],[1],[1],[1],[1],[1],[1],[1],[91,[],[],[],[],[0]],["RangeError: Maximum call stack size exceeded\n\nThis error is located at:\n in SpinnerComponent (created by inject-SpinnerComponent-with-eventStore)\n in inject-SpinnerComponent-with-eventStore (created by inject-inject-SpinnerComponent-with-eventStore-with-userStore)\n in inject-inject-SpinnerComponent-with-eventStore-with-userStore (created by Login)\n in RCTScrollContentView (at ScrollView.js:791)\n in RCTScrollView (at ScrollView.js:887)\n in ScrollView (at KeyboardAwareHOC.js:329)\n in _class (at Content.js:10)\n in Content (at connectStyle.js:384)\n in Styled(Content) (created by Login)\n in RCTView (at View.js:60)\n in View (at Container.js:15)\n in Container (at connectStyle.js:384)\n in Styled(Container) (created by Login)\n in Login (created by LoginContainer)\n in LoginContainer (created by inject-LoginContainer-with-userStore)\n in inject-LoginContainer-with-userStore (created by inject-inject-LoginContainer-with-userStore-with-tokenStore)\n in inject-inject-LoginContainer-with-userStore-with-tokenStore (at SceneView.js:35)\n in SceneView (at CardStack.js:404)\n in RCTView (at View.js:60)\n in View (at createAnimatedComponent.js:154)\n in AnimatedComponent (at Card.js:27)\n in Card (at PointerEventsContainer.js:55)\n in Container (at CardStack.js:430)\n in RCTView (at View.js:60)\n in View (at CardStack.js:364)\n in RCTView (at View.js:60)\n in View (at CardStack.js:363)\n in CardStack (at CardStackTransitioner.js:110)\n in RCTView (at View.js:60)\n in View (at Transitioner.js:187)\n in Transitioner (at CardStackTransitioner.js:60)\n in CardStackTransitioner (at StackNavigator.js:52)\n in Unknown (at createNavigator.js:33)\n in Navigator (at createNavigationContainer.js:202)\n in NavigationContainer (at SceneView.js:35)\n in SceneView (at CardStack.js:404)\n in RCTView (at View.js:60)\n in View (at createAnimatedComponent.js:154)\n in AnimatedComponent (at Card.js:27)\n in Card (at PointerEventsContainer.js:55)\n in Container (at CardStack.js:430)\n in RCTView (at View.js:60)\n in View (at CardStack.js:364)\n in RCTView (at View.js:60)\n in View (at CardStack.js:363)\n in CardStack (at CardStackTransitioner.js:110)\n in RCTView (at View.js:60)\n in View (at Transitioner.js:187)\n in Transitioner (at CardStackTransitioner.js:60)\n in CardStackTransitioner (at StackNavigator.js:52)\n in Unknown (at createNavigator.js:33)\n in Navigator (at createNavigationContainer.js:202)\n in NavigationContainer\n in RCTView (at View.js:60)\n in View (at Root.js:13)\n in Root (at connectStyle.js:384)\n in Styled(Root)\n in Unknown (created by Setup)\n in Provider (created by Setup)\n in StyleProvider (created by Setup)\n in Setup (at renderApplication.js:33)\n in RCTView (at View.js:60)\n in View (at AppContainer.js:102)\n in RCTView (at View.js:60)\n in View (at AppContainer.js:122)\n in AppContainer (at renderApplication.js:32)",[{"lineNumber":2273,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":57},{"lineNumber":2285,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":26},{"lineNumber":2289,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":52},{"lineNumber":2289,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":52},{"lineNumber":2289,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":52},{"lineNumber":2289,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":52},{"lineNumber":2289,"file":"blob:http://192.168.100.88:8081/453d0e6f-97f5-4fc0-8646-c91d153f0739","methodName":"isValidArgument","column":52},{"lineNu
Hello!
Here is a part of my code:
<PhoneInput ref = 'phone' cancelText = {'Cancel'} confirmText = {'Select'} autoFocus = {true} style = {{flexGrow: 1, height: 40, borderBottomColor: '#c98d41',padding: 8,borderBottomWidth: 2, marginHorizontal:33}} onChangePhoneNumber = {(text) => this._formatPhoneAndResetWarning(text)} initialCountry = 'ru' value={this.state.phone}/>
and here is method for changing state:
`_formatPhoneAndResetWarning(phoneInput){`
let phoneformatReactNative = require("phoneformat-react-native")
let formattedPhone = phoneformatReactNative.formatInternational('RU', phoneInput);
this.setState({
phone: formattedPhone
});
console.log('formatted Number is: ', this.state.phone)
`}`
So the state changes but PhoneInput's value - not
My app only works in landscape mode. When I use the PhoneInput
component, I get this error:
console.error: "Modal was presented with 0x2 orientations mask but the application only supports 0x18.Add more interface orientations to your app's Info.plist to fix this.Note: This will crash in non-dev mode."
Thanks for awesome package.
I am passing countriesList
prop to use my own countries where the items are not places in alphabetical form. But the package handles it itself. How can I prevent this? Thanks for answer
There is only a gray rectangle
react-native version: 0.46.1
On Android device, using react-native run-android
Found out that commenting resizeMode='stretch'
inside flag Image component fixes it
I think we should offer user a choice not to log error.
I am Getting undefined in the code
How can I add styles to this component?
https://github.com/thegamenicorus/react-native-phone-input/blob/master/lib/index.js#L181
I need to have the following styles:
{
// default
flex:1;
marginLeft:10;
// my custom styles
minHeight:36;
alignItems:flex-start;
justifyContent:center;
}
.../android/app/build/intermediates/res/merged/release/drawable-mdpi/node_modules_reactnativephoneinput_lib_resources_flags_images_my.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
I'm getting an error related to drawables. See facebook/react-native#16906.
Running a yarn install
seems to pull the wrong package when generating the bundles.
Unable to resolve module `./images/ad.png` from `/*/node_modules/react-native-phone-input/lib/resources/flags/index.js`: could not resolve `/*/node_modules/react-native-phone-input/lib/resources/flags/images/ad.png' as a file nor as a folder
The solution is to run npm install react-native-phone-input
after the yarn install.
Hey Guys.
Not sure if this issue is just located to android. But there doesn't seem to be an empty state flag icon for me.
If the input doesn't register as a country, the flag dissapears, shifting all content over to the left until a proper region number is detected, then the flag icon reappers and shifts input right.
Cheers guys,
image below for above mentioned flag issue
https://plussprdstorage.blob.core.windows.net/uploads/23046-1/636407029301506351416ddd.png
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.