react-native-country-picker-modal
A customizable React Native modal component for selecting countries with flags, emojis, and filtering.
What is react-native-country-picker-modal?
React Native Country Picker Modal is a React Native component that provides a modal interface for selecting countries. It displays a list of countries with flags, emojis, and optional details like calling codes, and includes filtering and theming options. It solves the problem of building a consistent, accessible country picker across iOS, Android, and Web platforms.
React Native developers building apps that require country selection, such as sign-up forms, phone number inputs, or location-based features.
Developers choose this library because it offers a fully-featured, customizable picker with offline data, cross-platform support, and easy integration, saving time compared to building a picker from scratch.
Overview
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
Use Cases
Best For
- Adding country selection to sign-up or profile forms in React Native apps
- Building phone number input components with country calling codes
- Creating location-based features that require country filtering
- Implementing dark mode support in cross-platform country pickers
- Developing apps that need offline country data without network requests
- Customizing UI themes for country selection modals
Not Ideal For
- Web-only applications without React Native or React Native Web setup
- Projects requiring non-modal country selection interfaces like dropdowns or inline lists
- Apps with strict bundle size constraints sensitive to large dependencies
- Teams preferring to manage country data internally without external packages
Pros & Cons
Pros
Includes flags and emojis for easy country identification, enhancing user experience without additional assets.
Offers text and alphabetical filtering, making it efficient to navigate long country lists, as shown in the demo.
Fully tested on iOS, Android, and Web, ensuring uniform behavior across platforms with provided examples.
Uses the world-countries package for offline access to country details, eliminating network dependencies.
Provides numerous props for styling, theming, and behavior, allowing deep integration with app design, such as dark theme support.
Cons
Relies on world-countries with base64 flag images, which can significantly increase app bundle size and affect load times.
Advanced features like disabling native modal require wrapping the app with CountryModalProvider, adding unnecessary complexity for simple use cases.
Primarily designed as a modal; adapting it to other UI patterns (e.g., dropdowns) is not straightforward without extensive workarounds.
Tied to the world-countries package for data, so updates or issues with that package could break functionality without direct control.
Frequently Asked Questions
Related Projects
react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.
lottie-react-nativeLottie wrapper for React Native.
react-native-mapsReact Native Mapview component for iOS + Android
react-native-gifted-chat💬 The most complete chat UI for React Native
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.