React Native Country Code & Currency Picker

A customizable Country Code and Currency Picker for React Native with country search, calling codes, currency symbols, country flags, optional phone-number input, responsive layouts, accessibility support, and flexible styling.

Built with React Native + TypeScript and designed for modern React Native applications.

✨ Features

• 🌍 Country picker
• 📞 Country calling codes
• 💰 Currency picker
• 🔎 Country name search
• 🔎 Calling-code search
• 🚩 Country flags
• 📱 Optional phone-number input
• 🔢 Numeric phone-number input
• 📏 Country-specific phone-number metadata
• 🎨 Flexible and customizable styles
• 📱 Portrait and landscape responsive layout
• ⚡ Optimized FlatList rendering
• ♿ Accessibility labels and roles
• 🧩 TypeScript support
• 📦 React Native Builder Bob
• 🍎 iOS support
• 🤖 Android support

📦 Installation

npm

npm install react-native-country-code-and-currency-picker

Yarn

yarn add react-native-country-code-and-currency-picker

🚀 Basic Usage

import React, {useState} from 'react';
import {Button, View} from 'react-native';

import {Picker} from 'react-native-country-code-and-currency-picker';

export default function App() {
  const [showPicker, setShowPicker] = useState(false);

  return (
    <View>
      <Button
        title="Select Country"
        onPress={() => setShowPicker(true)}
      />

      <Picker
        showPicker={showPicker}
        handlePicker={setShowPicker}
      />
    </View>
  );
}

🌍 Country Code Picker

The default picker mode is:

type="country_code"

Example:

<Picker
  showPicker={showPicker}
  handlePicker={setShowPicker}
  type="country_code"
/>

The country picker provides:

• Country name
• Country flag
• Calling code
• Country prefix
• Minimum phone-number length
• Maximum phone-number length
• Currency symbol

💰 Currency Picker

Use:

type="currency"

Example:

<Picker
  showPicker={showPicker}
  handlePicker={setShowPicker}
  type="currency"
/>

The currency picker displays the currency information available in the package dataset.

📱 Phone Number Input

The picker can optionally display a phone-number input together with the country selector.

import React, {useState} from 'react';
import {View} from 'react-native';

import {Picker} from 'react-native-country-code-and-currency-picker';

export default function App() {
  const [showPicker, setShowPicker] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');

  return (
    <View>
      <Picker
        showPicker={showPicker}
        handlePicker={setShowPicker}
        showInput
        value={phoneNumber}
        onChangeText={setPhoneNumber}
      />
    </View>
  );
}

The phone input accepts numeric characters only. Non-numeric characters are automatically removed from the input.

🇮🇳 Default Calling Code

The default calling code can be configured using:

defaultCallingCode="91"

Example:

<Picker
  showPicker={showPicker}
  handlePicker={setShowPicker}
  defaultCallingCode="91"
/>

Examples:

91  → India
1   → United States / Canada
44  → United Kingdom

🔎 Search

The picker supports searching by:

• Country name
• Calling code

Examples:

India
United States
91
+91
44

🎨 Customization

The picker supports multiple style properties.

<Picker
  showPicker={showPicker}
  handlePicker={setShowPicker}
  containerStyle={{
    borderRadius: 12,
  }}
  pickerSearchStyle={{
    fontSize: 16,
  }}
  pickerCountryNameStyle={{
    fontSize: 16,
  }}
  pickerCodeStyle={{
    fontWeight: '600',
  }}
  cancelButtonStyle={{
    borderRadius: 10,
  }}
/>

⚙️ Props

| Prop | Type | Default | Description | |---|---|---|---| | showPicker | boolean | Required | Controls picker visibility | | handlePicker | (visible: boolean) => void | Required | Opens or closes the picker | | type | 'country_code' \| 'currency' | 'country_code' | Picker mode | | value | string | — | Current phone input value | | onChangeText | (value: string) => void | — | Called when the input value changes | | defaultCallingCode | string | '91' | Initial calling code | | showInput | boolean | false | Displays phone-number input | | showInputFlag | boolean | true | Displays selected flag in the input | | showFlag | boolean | true | Displays country flags in the picker | | showVerticalLine | boolean | true | Displays input separator | | showCancelButton | boolean | true | Displays cancel button | | showOnlyCountryInPicker | boolean | false | Displays only country names | | outSideClickable | boolean | false | Allows closing picker by tapping outside | | inputPlaceholder | string | 'Mobile Number' | Phone input placeholder |

📞 Selection Callbacks

| Callback | Type | Description | |---|---|---| | name | (value: string) => void | Returns selected country name | | callingCode | (value: string) => void | Returns selected calling code | | flag | (value: string) => void | Returns selected country flag | | prefix | (value: string) => void | Returns selected country prefix | | minLength | (value: number) => void | Returns minimum phone-number length | | maxLength | (value: number) => void | Returns maximum phone-number length | | symbol | (value: string) => void | Returns selected currency symbol | | onChangeText | (value: string) => void | Returns phone/input value |

🎨 Style Props

<Picker
  inputContainerStyle={...}
  inputFlagStyle={...}
  inputVerticalLineStyle={...}
  inputCallingCodeStyle={...}
  inputStyle={...}
  containerStyle={...}
  pickerSearchStyle={...}
  pickerItemStyle={...}
  pickerCountryNameStyle={...}
  pickerCodeStyle={...}
  cancelButtonStyle={...}
  cancelButtonTextStyle={...}
/>

🧩 Complete Example

import React, {useState} from 'react';
import {Button, StyleSheet, View} from 'react-native';

import {Picker} from 'react-native-country-code-and-currency-picker';

export default function App() {
  const [showPicker, setShowPicker] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');
  const [countryName, setCountryName] = useState('');
  const [callingCode, setCallingCode] = useState('');

  return (
    <View style={styles.container}>
      <Button
        title="Select Country"
        onPress={() => setShowPicker(true)}
      />

      <Picker
        showPicker={showPicker}
        handlePicker={setShowPicker}
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        showInput
        defaultCallingCode="91"
        name={setCountryName}
        callingCode={setCallingCode}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});

📱 Responsive Orientation

The picker supports both portrait and landscape layouts.

The library uses React Native's:

useWindowDimensions()

through the internal useOrientation hook.

This allows the picker to react naturally when device orientation changes without manually subscribing to Dimensions change events.

⚡ Performance

The current implementation uses React and React Native performance practices where they provide real value:

• FlatList for country rendering
• Stable list keys
• useMemo for derived country lists
• useCallback for stable event handlers
• Memoized search filtering
• initialNumToRender
• maxToRenderPerBatch
• windowSize
• removeClippedSubviews on Android
• Avoiding unnecessary state updates
• Keeping static country data outside the component

The library avoids adding React APIs such as useTransition unless they provide a meaningful benefit for the particular operation.

♿ Accessibility

The picker includes accessibility information for interactive elements.

Examples include:

accessibilityRole="button"

and:

accessibilityLabel="Select country"

The library aims to provide:

• Accessible country rows
• Screen-reader-friendly labels
• Accessible search input
• Appropriate touch targets
• Accessible cancel action
• Improved keyboard behavior

🧩 TypeScript

The modernized library is written in TypeScript.

The source code uses typed interfaces for:

• Country data
• Picker props
• Component APIs
• Callback values

TypeScript declaration files are generated during the package build.

Run type checking with:

npm run typecheck

🏗️ Project Structure

react-native-country-code-and-currency-picker/
│
├── src/
│   ├── components/
│   │   └── Picker.tsx
│   ├── data/
│   │   └── countries.ts
│   ├── hooks/
        ├── useCountrySearch.ts
│   │   └── useOrientation.ts
│   ├── styles/
│   │   └── picker.styles.ts
│   ├── types/
│   │   ├── country.ts
│   │   └── picker.ts
│   ├── utils/
│   │   └── dimensions.ts
│   └── index.ts
│
├── .github/
│   └── workflows/
│
├── README.md
├── LICENSE
├── package.json
└── tsconfig.json

The example/ application is not currently included in the package repository.

🛠️ Development

Clone the repository:

git clone https://github.com/rahuljaiswal3294/react-native-country-code-and-currency-picker.git

Move into the project:

cd react-native-country-code-and-currency-picker

Install dependencies:

npm install

🔍 Type Checking

npm run typecheck

This validates the TypeScript source without generating JavaScript output.

📦 Build

Build the package using React Native Builder Bob:

npm run build

Typical generated output includes:

lib/
├── commonjs/
├── module/
└── typescript/

The generated lib directory should not be manually edited.

📦 Package Preview

Before publishing a package version:

npm pack --dry-run

This lets you verify which files will be included in the npm package.

🧪 Validation

Before creating a release:

npm run typecheck
npm run build
npm pack --dry-run

Only commands configured in package.json should be added to automated validation.

🚀 Publishing

Patch release

npm version patch

Minor release

npm version minor

Major release

npm version major

Then publish:

npm publish

🔄 Automated npm Publishing

The repository can be configured with GitHub Actions for automated npm publishing.

Recommended release flow:

Code change
    ↓
Pull Request
    ↓
Merge to main
    ↓
GitHub Actions
    ↓
TypeScript validation
    ↓
Build
    ↓
npm publishing

For secure publishing, npm Trusted Publishing using GitHub Actions and OIDC is preferred over storing a long-lived npm access token.

Automated publishing is a planned workflow until the GitHub Actions and npm Trusted Publishing configuration is enabled and verified.

🗺️ Roadmap

✅ Completed

• [x] Country picker
• [x] Currency picker
• [x] Country search
• [x] Calling-code search
• [x] Country flags
• [x] Optional phone-number input
• [x] Country-specific phone-number metadata
• [x] Custom styling
• [x] Responsive orientation handling
• [x] TypeScript migration
• [x] Modular component architecture
• [x] Typed component APIs
• [x] Accessibility labels and roles
• [x] React Native Builder Bob integration
• [x] npm package publication

🚀 Planned

• [ ] Comprehensive automated tests
• [ ] Improved API consistency while maintaining backward compatibility
• [ ] GitHub Actions CI validation
• [ ] Automated npm releases
• [ ] npm Trusted Publishing
• [ ] Expanded accessibility testing
• [ ] Example React Native application

🤝 Contributing

Contributions are welcome.

Create a feature branch:

git checkout -b feature/my-feature

Install dependencies:

npm install

Run validation:

npm run typecheck
npm run build

Commit your changes:

git commit -m "feat: add my feature"

Push your branch:

git push origin feature/my-feature

Then open a Pull Request.

📋 Changelog

Release history can be maintained in:

CHANGELOG.md

📄 License

This project is licensed under the MIT License.

See the LICENSE file for details.

👨‍💻 Author

Rahul Kumar Jaiswal
React Native Developer | Mobile Engineer

• 📧 Email: [email protected]
• 💼 LinkedIn: Rahul Kumar Jaiswal
• 💻 GitHub: @rahuljaiswal3294
• 🌐 Portfolio: rahul-jaiswal.lovable.app

📦 npm Package

The package is available on npm:

react-native-country-code-and-currency-picker

View package on npm

Install it with:

npm install react-native-country-code-and-currency-picker

⭐ Support

If you find this package useful, consider giving the repository a ⭐ on GitHub.

Issues, suggestions, and contributions are welcome.

Made with ❤️ using React Native + TypeScript.