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.