1.0.7 ⢠Published 5 months ago
country-state-city-picker v1.0.7
Country State City Picker for React Native (Works with Expo)
A simple React Native component for selecting Country, State, and City with an autocomplete dropdown.
ā
Fully compatible with React Native CLI and Expo.
š Installation
You can install the package using npm or Expo:
š Install with npm:
npm install country-state-city-picker
š Install with Expo:
npx expo install country-state-city-picker
Since React Native requires peer dependencies, make sure you have these installed:
npm install react react-native
š For Expo Users
This package works with Expo (Managed & Bare Workflow). No extra setup is required.
Simply install it and start using it!
⨠Features
ā
Select Country, State, and City with autocomplete
ā
Works with React Native CLI & Expo
ā
Supports custom placeholders
ā
Includes built-in country-state-city data (no need to add your own)
ā
Works out of the box
š Usage Example
import { useState } from "react";
import { View, Text } from "react-native";
import CountryStateCityPicker from "country-state-city-picker";
const App = () => {
const [location, setLocation] = useState(null);
return (
<View style={{ flex: 1, padding: 20, justifyContent: "center" }}>
<Text>Select Location:</Text>
<CountryStateCityPicker
updateLocation={setLocation}
defaultCountry="United States"
defaultState="New York"
defaultCity="New York City"
/>
{location && (
<View>
<Text>Country: {location.country}</Text>
{location.state && <Text>State: {location.state}</Text>}
{location.city && <Text>City: {location.city}</Text>}
</View>
)}
</View>
);
};
export default App;
āļø Props
Prop | Type | Default Value | Description |
---|---|---|---|
updateLocation | function | null | Callback function that returns selected country, state, and city. |
defaultCountry | string | null | Default selected country. |
defaultState | string | null | Default selected state (if country has states). |
defaultCity | string | null | Default selected city. |
countryPlaceholder | string | "Select country" | Placeholder text for country dropdown. |
statePlaceholder | string | "Select state" | Placeholder text for state dropdown. |
cityPlaceholder | string | "Select city" | Placeholder text for city dropdown. |
š ļø Dependencies
react-native-autocomplete-dropdown
(installed automatically)react
&react-native
(must be installed in your project)
š License
This project is licensed under the MIT License.