Gathering detailed insights and metrics for @olegnjadocode/react-native-country-picker-modal
Gathering detailed insights and metrics for @olegnjadocode/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.
2.0.2
1
MIT
TypeScript
264.01 kB
Installations
npm install @olegnjadocode/react-native-country-picker-modalDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
14.17.5
NPM Version
7.20.3
Releases
Unable to fetch releases
Languages
2
TypeScript
JavaScript
TypeScript (94.67%)
JavaScript (5.33%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1 Stars
370 Commits
7 Branches
2 Contributors
Updated on Dec 08, 2022
Maintainers
1
Package Meta Information
Latest Version
2.0.2
Package Id
@olegnjadocode/react-native-country-picker-modal@2.0.2
Unpacked Size
264.01 kB
Size
62.81 kB
File Count
71
NPM Version
7.20.3
Node Version
14.17.5
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
25
@types/jest@types/node-emoji@types/prop-types@types/react@types/react-native@types/react-test-rendererbabel-clibabel-eslintbabel-jestbabel-preset-expoexpogh-pageshuskyjest-expojsonprettierreactreact-domreact-nativereact-native-webreact-test-renderertslinttslint-config-prettiertypescriptworld-countries
Country Picker for React Native.
Forked version, added export of little modified getCountryInfoAsync function in order to set selected country by default and fixed transparent emoji on android issue
Example
1import { getCountryInfo } from '@olegnjadocode/react-native-country-picker-modal' 2 3const initLocalCountry: CountryCode = 'GB' 4 5const [selectedCountry, setSelectedCountry] = useState<Country>() 6 7useEffect(() => { 8 getCountryInfo({ countryCode: initLocalCountry }).then(data => { 9 if (data) setSelectedCountry(data) 10 }) 11}, [])
1$ yarn add @olegnjadocode/react-native-country-picker-modal
| 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.
No security vulnerabilities found.