react-native-dropdown-country-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published
NPM VERSION NPM WEEKLY DOWNLOADS GITHUB STAR YOUTUBE VIEWS NPM LIFETIME DOWNLOADS

🏳️‍🌈 React Native Dropdown Country Picker

🟢 React Native Dropdown Country Picker Similar as HTML Select List. It's not a modal.

Light Weight and Robust Country Picker So Far.

  • Equivalent to React Native Stock Component
  • Use the styles of your choice
  • Search the countries seamlessly
  • Option to add customizable input mobile field next to the Picker
  • Zero dependencies

Compatibility

iOS Android Web Expo

🔌 Installation

$ npm install react-native-dropdown-country-picker

OR

$ yarn add react-native-dropdown-country-picker

😎 Displaying the country picker

import CountryCodeDropdownPicker from 'react-native-dropdown-country-picker'

const App = () => {
  const [selected, setSelected] = React.useState('+91');
  const [country, setCountry] = React.useState('');
  const [phone, setPhone] = React.useState('');

  return(
    <CountryCodeDropdownPicker 
        selected={selected} 
        setSelected={setSelected}
        setCountryDetails={setCountry} 
        phone={phone} 
        setPhone={setPhone} 
        countryCodeTextStyles={{fontSize: 13}}
      />
  )

};

For Live Demo (Expo Snack)

⭐ Props for the component

Name Type Description Default
selected state var The default selected country dial code stored in state variable N/A
setSelected Function setState function to set the selected state variable N/A
setCountryDetails Function setState function to set additional country details in respective state variable (Optional) N/A
phone state var state variable if you want to display phone number field (Optional) N/A
setPhone Funtion setState function to set the phone state variable (Optional) N/A
countryCodeContainerStyles style Object style object to style the country code container (Optional) N/A
countryCodeTextStyles style object style object to style the text inside country code container (Optional) N/A
phoneStyles style object style object to style the text input of phone field (Optional) N/A
searchIcon string URL of the icon if you want to replace the search icon (Optional) N/A
closeIcon string URL of the icon if you want to replace the close icon (Optional) N/A
searchStyles style object style object to style the search field (Optional) N/A
searchTextStyles style object style object to style the search text input field (Optional) N/A
dropdownStyles style object style object to style the dropdown container (Optional) N/A
dropdownTextStyles style object style object to style the text inside dropdown container (Optional) N/A

▶️ Watch Tutorial Video -->

Watch video

Package Sidebar

Install

npm i react-native-dropdown-country-picker

Weekly Downloads

183

Version

1.0.9

License

MIT

Unpacked Size

36.2 kB

Total Files

8

Last publish

Collaborators

  • mmusaib