{"_id":"@abhishek262877/react-native-country-code-input","name":"@abhishek262877/react-native-country-code-input","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abhishek262877/react-native-country-code-input","version":"1.0.0","description":"A React Native country code input component with phone validation","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","prepare":"npm run build","test":"jest","test:watch":"jest --watch"},"jest":{"preset":"react-native","moduleFileExtensions":["ts","tsx","js","jsx","json"],"transformIgnorePatterns":["node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)"]},"keywords":["react-native","country-code","phone-input","picker","dial-code","phone-validation"],"author":{"name":"Abhishek Laxkar","email":"abhisheklaxkar125@gmail.com"},"license":"MIT","peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0"},"devDependencies":{"@babel/preset-env":"^7.29.0","@babel/preset-react":"^7.28.5","@babel/preset-typescript":"^7.28.5","@react-native/babel-preset":"^0.84.1","@testing-library/react-native":"^13.3.3","@types/jest":"^30.0.0","@types/react":"^19.2.14","jest":"^30.2.0","metro-react-native-babel-preset":"^0.77.0","react-test-renderer":"^19.2.4","typescript":"^5.9.3"},"_id":"@abhishek262877/react-native-country-code-input@1.0.0","_nodeVersion":"25.6.1","_npmVersion":"11.9.0","dist":{"integrity":"sha512-Jbn3jFriqsqJQgPg0Lietu4cRSQxGDT3f/4OWSg7AuzQ1W5svgJzyQtk2EBS0cG2o3MTsJmGmXIVUZjKThSuww==","shasum":"7ede9caae5481fbd7cbb5733af7dfed107554aa4","tarball":"https://registry.npmjs.org/@abhishek262877/react-native-country-code-input/-/react-native-country-code-input-1.0.0.tgz","fileCount":39,"unpackedSize":94602,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDK98ES3fWgtBCPc7NggPVPLAO9+TPEk3/DKRGyb4gLoAIhAO9j+9pcuVJb4l87CVxSF7MjvvRyu2ZC9juTvki4KT9K"}]},"_npmUser":{"name":"abhishek262877","email":"abhisheklaxkar125@gmail.com"},"directories":{},"maintainers":[{"name":"abhishek262877","email":"abhisheklaxkar125@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-country-code-input_1.0.0_1776967721552_0.7859714842068719"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-23T18:08:41.429Z","1.0.0":"2026-04-23T18:08:41.668Z","modified":"2026-04-23T18:08:41.908Z"},"maintainers":[{"name":"abhishek262877","email":"abhisheklaxkar125@gmail.com"}],"description":"A React Native country code input component with phone validation","keywords":["react-native","country-code","phone-input","picker","dial-code","phone-validation"],"author":{"name":"Abhishek Laxkar","email":"abhisheklaxkar125@gmail.com"},"license":"MIT","readme":"# react-native-country-code-input\n\nA fully controlled React Native component for phone number input with country code selection, flag display, built-in phone validation, and full UI customization.\n\n## Installation\n\n```sh\nnpm install react-native-country-code-input\n```\n\n## Basic Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { View } from 'react-native';\nimport { CountryCodeInput, countryData } from 'react-native-country-code-input';\nimport type { Country } from 'react-native-country-code-input';\n\nexport default function App() {\n  const defaultCountry = countryData.find((c) => c.code === 'US')!;\n  const [phone, setPhone] = useState('');\n  const [country, setCountry] = useState<Country>(defaultCountry);\n\n  return (\n    <View style={{ padding: 20 }}>\n      <CountryCodeInput\n        value={phone}\n        onChangeText={setPhone}\n        selectedCountry={country}\n        onSelectCountry={setCountry}\n        label=\"Phone Number\"\n        placeholder=\"Enter phone number\"\n      />\n    </View>\n  );\n}\n```\n\n## Validation Example\n\n```tsx\nimport { validatePhone } from 'react-native-country-code-input';\n\nconst isValid = validatePhone(phone, country);\n// true if phone matches the country's expected format\n\nif (!isValid) {\n  console.log('Invalid phone number for', country.name);\n}\n```\n\n## Format Phone\n\n```tsx\nimport { formatPhone } from 'react-native-country-code-input';\n\nconst full = formatPhone(country.dialCode, phone);\n// e.g. \"+14155551234\"\n```\n\n## Custom Styles\n\nUse the `styles` prop to override any part of the component's appearance. Each key maps to a specific region of the UI.\n\n```tsx\nimport { CountryCodeInput } from 'react-native-country-code-input';\nimport type { CountryCodeInputStyles } from 'react-native-country-code-input';\n\nconst inputStyles: CountryCodeInputStyles = {\n  inputWrapper: {\n    borderColor: '#007AFF',\n    borderRadius: 12,\n    borderWidth: 2,\n  },\n  dialCodeText: {\n    color: '#007AFF',\n  },\n  input: {\n    color: '#1A1A1A',\n    fontSize: 16,\n  },\n  errorText: {\n    color: '#FF3B30',\n    fontSize: 13,\n  },\n};\n\n<CountryCodeInput\n  value={phone}\n  onChangeText={setPhone}\n  selectedCountry={country}\n  onSelectCountry={setCountry}\n  styles={inputStyles}\n/>\n```\n\n### `CountryCodeInputStyles` keys\n\n| Key              | Type        | Targets                                      |\n| ---------------- | ----------- | -------------------------------------------- |\n| `container`      | `ViewStyle` | Outer wrapper of the entire component        |\n| `label`          | `TextStyle` | Label text above the input                   |\n| `inputWrapper`   | `ViewStyle` | The bordered row containing flag + input     |\n| `countrySection` | `ViewStyle` | The flag + dial code + dropdown icon section |\n| `dialCodeText`   | `TextStyle` | The dial code text (e.g. `+1`)               |\n| `input`          | `TextStyle` | The phone number `TextInput`                 |\n| `errorText`      | `TextStyle` | Error message shown below the input          |\n\n> **Note:** Flag rendering is always internal. Flags cannot be customized or hidden.\n\n## Custom Icons\n\nReplace the default phone icon (☎) or dropdown arrow (▼) with any React node — your own icon component, an SVG, or an image.\n\n```tsx\nimport { Text } from 'react-native';\nimport MaterialIcons from 'react-native-vector-icons/MaterialIcons';\n\n<CountryCodeInput\n  value={phone}\n  onChangeText={setPhone}\n  selectedCountry={country}\n  onSelectCountry={setCountry}\n  renderPhoneIcon={() => (\n    <MaterialIcons name=\"local-phone\" size={20} color=\"#007AFF\" style={{ marginRight: 8 }} />\n  )}\n  renderDropdownIcon={() => (\n    <MaterialIcons name=\"keyboard-arrow-down\" size={22} color=\"#333\" />\n  )}\n/>\n```\n\nIf either prop is omitted the default icon is used automatically — no visual change.\n\n## Props\n\n| Prop                 | Type                          | Required | Default          | Description                                        |\n| -------------------- | ----------------------------- | -------- | ---------------- | -------------------------------------------------- |\n| `value`              | `string`                      | Yes      | —                | Current phone number value                         |\n| `onChangeText`       | `(text: string) => void`      | Yes      | —                | Callback when the phone input changes              |\n| `selectedCountry`    | `Country`                     | Yes      | —                | Currently selected country object                  |\n| `onSelectCountry`    | `(country: Country) => void`  | Yes      | —                | Callback when a country is selected from the list  |\n| `errorMsg`           | `string`                      | No       | —                | Error message displayed below the input            |\n| `placeholder`        | `string`                      | No       | `Mobile number`  | TextInput placeholder text                         |\n| `editable`           | `boolean`                     | No       | `true`           | Whether the phone input is editable                |\n| `label`              | `string`                      | No       | —                | Label text rendered above the input                |\n| `onSubmitEditing`    | `() => void`                  | No       | —                | Called when the keyboard submit button is pressed  |\n| `styles`             | `CountryCodeInputStyles`      | No       | —                | Override styles for specific regions of the UI     |\n| `containerStyle`     | `ViewStyle`                   | No       | —                | Shorthand style override for the outer container   |\n| `labelStyle`         | `TextStyle`                   | No       | —                | Shorthand style override for the label text        |\n| `renderPhoneIcon`    | `() => ReactNode`             | No       | `☎`              | Render a custom phone icon inside the input        |\n| `renderDropdownIcon` | `() => ReactNode`             | No       | `▼`              | Render a custom dropdown icon in the country area  |\n\n## Country Object\n\n```ts\ninterface Country {\n  name: string;     // e.g. \"United States\"\n  flag: string;     // emoji flag, e.g. \"🇺🇸\"\n  dialCode: string; // e.g. \"+1\"\n  code: string;     // ISO 3166-1 alpha-2, e.g. \"US\"\n  regex: RegExp;    // validation pattern for this country's phone numbers\n}\n```\n\n## Exports\n\n```ts\nimport {\n  CountryCodeInput,   // The main component\n  countryData,        // Array of all 239 countries\n  validatePhone,      // (phone, country) => boolean\n  formatPhone,        // (dialCode, phone) => string  e.g. \"+919876543210\"\n} from 'react-native-country-code-input';\n\nimport type {\n  Country,\n  CountryCodeInputProps,\n  CountryCodeInputStyles,\n} from 'react-native-country-code-input';\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-981df0776574738813e1a9b82edf2143"}