Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detecting country code for react-native-phone-number

I use the react-native-phone-number-input library. I want the country flag to be determined automatically depending on where I'm from. How do I implement this?

<PhoneInput
  ref={phoneInput}
  defaultValue={value}
  // defaultCode="DM"
  layout="first"
  // onChangeText={(v) => setValue(v)}
  onChangeFormattedText={(v) => setValue(v)}
  placeholder={' '}
  defaultCode="IN"
  withDarkTheme
  withShadow
  autoFocus
  containerStyle={{
    borderRadius: 0,
    width: '100%',
    height: 49,
  }}
  textInputStyle={{height: 68}}
  textContainerStyle={{paddingTop: 15}}
/>
like image 771
Material Avatar asked Jan 25 '26 02:01

Material


1 Answers

The react-native-localize package can be used to get the country code of the current users device - and I assume this can just then be passed in to your PhoneNumber component to display the correct country flag.

import * as RNLocalize from "react-native-localize";

console.log(RNLocalize.getCountry());
// -> "FR"

I assume this would then work

<PhoneInput
  ref={phoneInput}
  defaultValue={value}
  // defaultCode="DM"
  layout="first"
  // onChangeText={(v) => setValue(v)}
  onChangeFormattedText={(v) => setValue(v)}
  placeholder={' '}
  defaultCode={RNLocalize.getCountry()}
  withDarkTheme
  withShadow
  autoFocus
  containerStyle={{
    borderRadius: 0,
    width: '100%',
    height: 49,
  }}
  textInputStyle={{height: 68}}
  textContainerStyle={{paddingTop: 15}}
/>
like image 191
distributedsoftware Avatar answered Jan 26 '26 15:01

distributedsoftware



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!