0.0.2 • Published 11 months ago

react-native-dropdown-picker-dg v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago
  • 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

iOSAndroidWebExpo

🔌 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-picker-dg";

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 }}
    />
  );
};

⭐ Props for the component

NameTypeDescriptionDefault
selectedstate varThe default selected country dial code stored in state variableN/A
setSelectedFunctionsetState function to set the selected state variableN/A
setCountryDetailsFunctionsetState function to set additional country details in respective state variable (Optional)N/A
phonestate varstate variable if you want to display phone number field (Optional)N/A
setPhoneFuntionsetState function to set the phone state variable (Optional)N/A
countryCodeContainerStylesstyle Objectstyle object to style the country code container (Optional)N/A
countryCodeTextStylesstyle objectstyle object to style the text inside country code container (Optional)N/A
phoneStylesstyle objectstyle object to style the text input of phone field (Optional)N/A
searchIconstringURL of the icon if you want to replace the search icon (Optional)N/A
closeIconstringURL of the icon if you want to replace the close icon (Optional)N/A
searchStylesstyle objectstyle object to style the search field (Optional)N/A
searchTextStylesstyle objectstyle object to style the search text input field (Optional)N/A
dropdownStylesstyle objectstyle object to style the dropdown container (Optional)N/A
dropdownTextStylesstyle objectstyle object to style the text inside dropdown container (Optional)N/A