1.0.7 • Published 5 months ago

country-state-city-picker v1.0.7

Weekly downloads
-
License
MIT
Repository
-
Last release
5 months ago

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

PropTypeDefault ValueDescription
updateLocationfunctionnullCallback function that returns selected country, state, and city.
defaultCountrystringnullDefault selected country.
defaultStatestringnullDefault selected state (if country has states).
defaultCitystringnullDefault selected city.
countryPlaceholderstring"Select country"Placeholder text for country dropdown.
statePlaceholderstring"Select state"Placeholder text for state dropdown.
cityPlaceholderstring"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.

1.0.7

5 months ago

1.0.6

5 months ago

1.0.5

5 months ago

1.0.4

5 months ago

1.0.3

5 months ago

1.0.2

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago