Country picker for react native. No dependencies. This module is developed to view the Country Flag by Country Code. This is also support for CountryPicker Modal and util functions. This is inspired by https://www.npmjs.com/package/react-native-extended-country-picker-modal
npm install react-native-extended-country-picker
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import ExtendedCountryPicker from 'react-native-extended-country-picker';
export default function App() {
const [country, setCountry] = React.useState<any>(null);
return (
<View style={styles.container}>
<ExtendedCountryPicker
countryCode={'US'}
onSelect={(value) => setCountry(value)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Just view country flag and text
/* eslint-disable react-native/no-inline-styles */
import * as React from 'react';
import { View } from 'react-native';
import { CountryView } from 'react-native-extended-country-picker';
export default function App() {
return (
<View>
<CountryView
countryCode="US"
touchDisabled
containerStyle={{
marginBottom: 100,
borderBottomColor: 'red',
borderBottomWidth: 1,
}}
textStyle={{ fontSize: 33, color: 'red' }}
flagStyle={{ height: 40, width: 60 }}
/>
</View>
);
}
Prop | Type | Description |
---|---|---|
countryCode |
string | code ISO 3166-1 alpha-2 country code. Example: US, UK, JP, IN, DE |
flagOnly? |
boolean | Show only Country Code |
touchDisabled? |
boolean | Country Code |
containerStyle? |
ViewStyle | Country Code |
flagStyle? |
ImageStyle | flag is a image. You can change the style |
textStyle? |
TextStyle | Text Style of the country text |
onPress? |
(country | CountryType) => void |
List of Country that can be used in Your own modal
import * as React from 'react';
import { View } from 'react-native';
import { CountryList } from 'react-native-extended-country-picker';
export default function App() {
return (
<View>
<CountryList
onSelect={value=> console.log(value)}
selectedCountry={'US'}
/>
</View>
);
}
Prop | Type | Description |
---|---|---|
onSelect |
(value: CountryType) => void | When user click on the country this will triggers |
selectedCountryCode? |
string | default or selected country code |
data? |
CountryType[] | You can set custom country list. Your own country list |
renderText? |
(country: CountryType) => ReactNode, string | You can change the show country should render |
This is a complete solution for the Country Picker Modal
import * as React from 'react';
import { View } from 'react-native';
import { CountryList } from 'react-native-extended-country-picker';
export default function App() {
return (
<View>
<CountryList
onSelect={value=> console.log(value)}
selectedCountry={'US'}
/>
</View>
);
}
Prop | Type | Description |
---|---|---|
onSelect |
(value: CountryType) => void | When user click on the country this will triggers |
countryCode? |
string | default or selected country code |
You can get list of countries like this
import * as React from 'react';
import { countries } from 'react-native-extended-country-picker';
export default function App() {
console.log('countries',countries);
return (
<View>
....
</View>
);
}
You can get country by code
import * as React from 'react';
import { getCountryByCode } from 'react-native-extended-country-picker';
export default function App() {
console.log('getCountryByCode',getCountryByCode('US'));
return (
<View>
....
</View>
);
}
You can get country by code
import * as React from 'react';
import { filterCountriesByQuery } from 'react-native-extended-country-picker';
export default function App() {
console.log('filterCountriesByQuery',filterCountriesByQuery('United'));
return (
<View>
....
</View>
);
}
Prop | Type | Description |
---|---|---|
code |
string | code ISO 3166-1 alpha-2 country code. Example: US, UK, JP, IN, DE |
name? |
string | Long Name of the Country |
callingCode? |
string | Phone number code of the country |
img? |
ImageSourcePropType | Source of the image flag |
See the contributing guide to learn how to contribute to the repository and the development workflow.
- Complete basic requirement
- Setup Unit and Component Tests
- Integrate with Circle CI
- Publish to npm
- 100% test coverage
- Add more prop types
- https://www.npmjs.com/package/react-native-extended-country-picker-modal
- https://www.npmjs.com/package/react-native-extended-country-picker-modal-fix
MIT