https://github.com/logisticinfotech/react-native-custom-country-picker
custom design country picker for react native
https://github.com/logisticinfotech/react-native-custom-country-picker
Last synced: about 1 month ago
JSON representation
custom design country picker for react native
- Host: GitHub
- URL: https://github.com/logisticinfotech/react-native-custom-country-picker
- Owner: logisticinfotech
- Created: 2023-02-08T09:46:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-08T13:43:07.000Z (over 3 years ago)
- Last Synced: 2025-09-03T11:09:48.246Z (11 months ago)
- Language: TypeScript
- Size: 562 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-custom-country-picker
## Getting started
`$ npm install @logisticinfotech/react-native-custom-country-picker --save`
### Mostly automatic installation
`$ react-native link @logisticinfotech/react-native-custom-country-picker`
## Usage
```javascript
import CountryPicker from '@logisticinfotech/react-native-custom-country-picker';
// TODO: What to do with the module?
CountryPicker;
```
## Country picker with Country Code with custom color and theme for react native support both platform iOS and Android
1. country picker plugin.
2. Cross platform compatibility android and ios both.
3. Search country using country name.
4. Support multiple language.
5. Dynamically change dropdown, search and back button images.
6. Customizable search bar style,container style and text colors.
7. Change animation(Slide, fade, none).
8. Support dark and light theme.
## Installation
> **npm install @logisticinfotech/react-native-custom-country-picker --save**
## Usage
```tsx
import React, {useState} from 'react';
import {StatusBar, StyleSheet, Text, View} from 'react-native';
import CountryPicker from '@logisticinfotech/react-native-custom-country-picker';
const App = () => {
const [countryCode, setCountryCode] = useState('IN');
const selectedValue = (value: string) => {
console.log(value);
setCountryCode(value);
};
return (
React Native Dark Theme Country Picker
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
titleText: {
color: '#fff',
fontSize: 25,
marginBottom: 25,
fontWeight: 'bold',
textAlign: 'center',
},
pickerTitleStyle: {
justifyContent: 'center',
flexDirection: 'row',
alignSelf: 'center',
fontWeight: 'bold',
},
pickerStyle: {
height: 54,
width: 150,
marginVertical: 10,
borderColor: '#efefef',
alignItems: 'center',
marginHorizontal: 10,
padding: 10,
backgroundColor: '#000',
borderRadius: 5,
borderWidth: 2,
fontSize: 16,
color: '#fff',
},
selectedCountryTextStyle: {
paddingLeft: 5,
color: '#fff',
textAlign: 'right',
},
countryNameTextStyle: {
paddingLeft: 10,
textAlign: 'right',
},
searchBarStyle: {
flex: 1,
},
roundImageStyle: {
height: 34,
width: 34,
borderRadius: 17,
},
dropDownStyle: {
tintColor: '#fff',
},
flatListStyle: {
padding: 5,
},
});
```
## Properties
```
animationType?: "none" | "slide" | "fade" | undefined; defaultValues: ===> "slide"
containerStyle?: ViewStyle;
searchBarStyle?: ViewStyle;
searchBarContainerStyle?: ViewStyle;
pickerTitleStyle?: TextStyle;
countryNameTextStyle?: TextStyle;
selectedCountryTextStyle?: TextStyle;
dropDownImage?: ImageSourcePropType; defaultValues: ===>require("./res/ic_drop_down.png")
backButtonImage?: ImageSourcePropType; defaultValues: ===>require("./res/ic_back_black.png")
searchButtonImage?: ImageSourcePropType; defaultValues: ===>require("./res/ic_search.png")
dropDownImageStyle?: ImageStyle;
countryFlagStyle?: ImageStyle;
flatListStyle?: ViewStyle;
safeAreaStyle?: ViewStyle;
theme: "dark" | "light"; defaultValues: ===> "light"
countryCode?: string | any; defaultValues: ===>"IN"
hideCountryFlag?: boolean; defaultValues: ===> false
hideCountryCode?: boolean; defaultValues: ===> false
searchBarPlaceHolder?: string; defaultValues: ===>"Search..."
pickerTitle?: string; defaultValues: ===> ""
disable?: boolean; defaultValues: ===> false
selectedValue?: Function; defaultValues: ===> ""
hideSearchBar?: boolean; defaultValues: ===> false
hidePickerTitle?: boolean; defaultValues: ===>true
language:
| "common"
| "ces"
| "cym"
| "deu"
| "fra" defaultValues:==> "common"
| "hrv"
| "ita"
| "jpn"
| "nld"
| "por"
| "rus"
| "slk"
| "spa"
| "fin"
| "est"
| "zho"
| "pol"
| "urd"
| "kor";
```
## Country Code
{
'AF',
'AL',
'DZ',
'AS',
'AD',
'AO',
'AI',
'AQ',
'AG',
'AR',
'AM',
'AW',
'AU',
'AT',
'AZ',
'BS',
'BH',
'BD',
'BB',
'BY',
'BE',
'BZ',
'BJ',
'BM',
'BT',
'BO',
'BA',
'BW',
'BV',
'BR',
'IO',
'VG',
'BN',
'BG',
'BF',
'BI',
'KH',
'CM',
'CA',
'CV',
'BQ',
'KY',
'CF',
'TD',
'CL',
'CN',
'CX',
'CC',
'CO',
'KM',
'CK',
'CR',
'HR',
'CU',
'CW',
'CY',
'CZ',
'CD',
'DK',
'DJ',
'DM',
'DO',
'EC',
'EG',
'SV',
'GQ',
'ER',
'EE',
'SZ',
'ET',
'FK',
'FO',
'FJ',
'FI',
'FR',
'GF',
'PF',
'TF',
'GA',
'GM',
'GE',
'DE',
'GH',
'GI',
'GR',
'GL',
'GD',
'GP',
'GU',
'GT',
'GG',
'GN',
'GW',
'GY',
'HT',
'HM',
'HN',
'HU',
'IS',
'IN',
'ID',
'IR',
'IQ',
'IE',
'IM',
'IL',
'IT',
'CI',
'JM',
'JP',
'JE',
'JO',
'KZ',
'KE',
'XK',
'KW',
'KG',
'LA',
'LV',
'LB',
'LS',
'LR',
'LY',
'LI',
'LT',
'LU',
'MO',
'MK',
'MG',
'MW',
'MY',
'MV',
'ML',
'MT',
'MH',
'MQ',
'MR',
'MU',
'YT',
'MX',
'FM',
'MD',
'MC',
'MN',
'ME',
'MS',
'MA',
'MZ',
'MM',
'NA',
'NR',
'NP',
'NL',
'NC',
'NZ',
'NI',
'NE',
'NG',
'NU',
'NF',
'KP',
'MP',
'NO',
'OM',
'PK',
'PW',
'PS',
'PA',
'PG',
'PY',
'PE',
'PH',
'PN',
'PL',
'PT',
'PR',
'QA',
'CG',
'RO',
'RU',
'RW',
'RE',
'BL',
'SH',
'KN',
'LC',
'MF',
'PM',
'VC',
'WS',
'SM',
'SA',
'SN',
'RS',
'SC',
'SL',
'SG',
'SX',
'SK',
'SI',
'SB',
'SO',
'ZA',
'GS',
'KR',
'SS',
'ES',
'LK',
'SD',
'SR',
'SJ',
'SE',
'CH',
'SY',
'ST',
'TW',
'TJ',
'TZ',
'TH',
'TL',
'TG',
'TK',
'TO',
'TT',
'TN',
'TR',
'TM',
'TC',
'TV',
'UG',
'UA',
'AE',
'GB',
'US',
'UM',
'VI',
'UY',
'UZ',
'VU',
'VA',
'VE',
'VN',
'WF',
'EH',
'YE',
'ZM',
'ZW',
'KI',
'HK',
'AX'
}