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
import CountryPicker from '@logisticinfotech/react-native-custom-country-picker';
CountryPicker;
Country picker with Country Code with custom color and theme for react native support both platform iOS and Android
- country picker plugin.
- Cross platform compatibility android and ios both.
- Search country using country name.
- Support multiple language.
- Dynamically change dropdown, search and back button images.
- Customizable search bar style,container style and text colors.
- Change animation(Slide, fade, none).
- Support dark and light theme.
Installation
npm install @logisticinfotech/react-native-custom-country-picker --save
Usage
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<string>('IN');
const selectedValue = (value: string) => {
console.log(value);
setCountryCode(value);
};
return (
<View style={styles.container}>
<StatusBar
backgroundColor={'#000'}
barStyle="light-content"
translucent
/>
<Text style={styles.titleText}>
React Native Dark Theme Country Picker
</Text>
<CountryPicker
disable={false}
animationType={'slide'}
containerStyle={styles.pickerStyle}
pickerTitleStyle={styles.pickerTitleStyle}
dropDownImage={require('./res/ic_drop_down.png')}
selectedCountryTextStyle={styles.selectedCountryTextStyle}
countryNameTextStyle={styles.countryNameTextStyle}
pickerTitle={'Country Picker'}
searchBarPlaceHolder={'Search......'}
hideCountryFlag={false}
hideCountryCode={false}
searchBarStyle={styles.searchBarStyle}
countryFlagStyle={styles.roundImageStyle}
dropDownImageStyle={styles.dropDownStyle}
flatListStyle={styles.flatListStyle}
theme={'dark'}
backButtonImage={require('./res/ic_back_black.png')}
searchButtonImage={require('./res/ic_search.png')}
countryCode={countryCode}
hideSearchBar={false}
hidePickerTitle={true}
selectedValue={selectedValue}
/>
</View>
);
};
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'
}