Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-country-picker-modal
Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-country-picker-modal
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
Installations
npm install @react-native-oh-tpl/react-native-country-picker-modalDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.11.0
NPM Version
10.2.4
Releases
11
Languages
2
TypeScript
JavaScript
TypeScript (82.64%)
JavaScript (17.36%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,095 Stars
361 Commits
831 Forks
18 Watchers
11 Branches
64 Contributors
Updated on Jul 11, 2025
Maintainers
23
Package Meta Information
Latest Version
2.0.0-0.0.1
Package Id
@react-native-oh-tpl/react-native-country-picker-modal@2.0.0-0.0.1
Unpacked Size
262.28 kB
Size
62.75 kB
File Count
70
NPM Version
10.2.4
Node Version
20.11.0
Published on
Oct 29, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
33
@babel/core@babel/eslint-parser@babel/preset-env@types/jest@types/node-emoji@types/react@types/react-native@types/react-test-renderer@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-clibabel-jestbabel-preset-expoeslinteslint-config-prettiereslint-plugin-importeslint-plugin-jsdoceslint-plugin-prefer-arroweslint-plugin-reactexpogh-pageshuskyjestjest-expojsonprettierreactreact-domreact-nativereact-native-webreact-test-renderertypescriptworld-countries
Country Picker for React Native.
| iOS | Android | Web |
|---|---|---|
 |  |  |
Demo
Installation
1$ yarn add react-native-country-picker-modal
Basic Usage
For more complete example open App.tsx
1import React, { useState } from 'react' 2import { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native' 3import CountryPicker from 'react-native-country-picker-modal' 4import { CountryCode, Country } from './src/types' 5 6const styles = StyleSheet.create({ 7 // ... 8}) 9 10export default function App() { 11 const [countryCode, setCountryCode] = useState<CountryCode>('FR') 12 const [country, setCountry] = useState<Country>(null) 13 const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>( 14 false, 15 ) 16 const [withFlag, setWithFlag] = useState<boolean>(true) 17 const [withEmoji, setWithEmoji] = useState<boolean>(true) 18 const [withFilter, setWithFilter] = useState<boolean>(true) 19 const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false) 20 const [withCallingCode, setWithCallingCode] = useState<boolean>(false) 21 const onSelect = (country: Country) => { 22 setCountryCode(country.cca2) 23 setCountry(country) 24 } 25 return ( 26 <View style={styles.container}> 27 <Text style={styles.welcome}>Welcome to Country Picker !</Text> 28 <Option 29 title='With country name on button' 30 value={withCountryNameButton} 31 onValueChange={setWithCountryNameButton} 32 /> 33 <Option title='With flag' value={withFlag} onValueChange={setWithFlag} /> 34 <Option 35 title='With emoji' 36 value={withEmoji} 37 onValueChange={setWithEmoji} 38 /> 39 <Option 40 title='With filter' 41 value={withFilter} 42 onValueChange={setWithFilter} 43 /> 44 <Option 45 title='With calling code' 46 value={withCallingCode} 47 onValueChange={setWithCallingCode} 48 /> 49 <Option 50 title='With alpha filter code' 51 value={withAlphaFilter} 52 onValueChange={setWithAlphaFilter} 53 /> 54 <CountryPicker 55 {...{ 56 countryCode, 57 withFilter, 58 withFlag, 59 withCountryNameButton, 60 withAlphaFilter, 61 withCallingCode, 62 withEmoji, 63 onSelect, 64 }} 65 visible 66 /> 67 <Text style={styles.instructions}>Press on the flag to open modal</Text> 68 {country !== null && ( 69 <Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text> 70 )} 71 </View> 72 ) 73}
Props
countryCode: CountryCoderegion?:Regionsubregion?: SubregioncountryCodes?: CountryCodetheme?: Themetranslation?: TranslationLanguageCodemodalProps?: ModalPropsfilterProps?: CountryFilterPropsflatListProps?: FlatListPropswithAlphaFilter?: booleanwithCallingCode?: booleanwithCurrency?: booleanwithEmoji?: booleanwithCountryNameButton?: booleanwithCurrencyButton?: booleanwithCallingCodeButton?: booleanwithFlagButton?: booleanwithCloseButton?: booleanwithFilter?: booleanwithFlag?: booleanwithModal?: booleanvisible?: booleancontainerButtonStyle?:StyleProp<ViewStyle>renderFlagButton?(props: (FlagButton['props'])): ReactNode (FlagButton props)renderCountryFilter?(props: CountryFilter['props']): ReactNode (CountryFilter props is TextInputProps)onSelect(country: Country): void (Country)onOpen(): voidonClose(): voidcloseButtonImage?: ImageSourcePropTypecloseButtonStyle?: StylePropcloseButtonImageStyle?: StylePropdisableNativeModal?: boolean (you have to wrap your all app with CountryModalProvider)preferredCountries: CountryCode preferred countries they appear first (withAlphaFiltermust be false)
Dark theme example
A simple example to display a CountryPicker component with a dark theme.
1import CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal' 2 3const MyDarkView = () => <CountryPicker theme={DARK_THEME} />
Dependencies
- world-countries : https://www.npmjs.com/package/world-countries
FAQ
Is it supported and tested both on android and iOS?
YES
Is the data that is populated inside the list saved offline once I install your package?
YES : It used the world-countries package and image is stored into json and base64.
Tiers lib using this lib
See also
Contribution
- @xcapentier The main author.
Questions
Feel free to contact me or create an issue
made with ♥
Licence
Hire an expert!
Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 11/18 approved changesets -- score normalized to 6
Reason
1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Reason
29 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.5
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More