{"_id":"@bradryan/react-native-country-picker-modal","name":"@bradryan/react-native-country-picker-modal","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@bradryan/react-native-country-picker-modal","version":"2.0.0","description":"react-native country picker","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/bradryan/react-native-country-picker-modal.git"},"scripts":{"start":"yarn config:dev && expo start","start:web":"yarn config:dev && expo start -w --dev","tsc":"tsc --noEmit","build":"rm -rf lib/ && node_modules/.bin/tsc && mkdir ./lib && cp -rf ./src/assets ./lib/assets && yarn minify","minify":"yarn minify:emoji","minify:emoji":"./scripts/minify.js ./lib/assets/data/countries-emoji.json","config:dev":"json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'","config:npm":"json -I -f package.json -e 'this.main=\"lib/index.js\"'","lint":"eslint .","test":"TZ=Europe/Paris jest","data:image":"rm -rf ./data/countries.json && ./scripts/transform-world-countries.js > ./data/countries.json","data:emoji":"rm -rf ./data/countries-emoji.json && ./scripts/transform-world-countries.js --emoji > ./data/countries-emoji.json","data:cca2":"rm -rf ./data/cca2.json && ./scripts/transform-world-countries.js --cca2 > ./data/cca2.json","data:regions":"rm -rf ./data/cca2.json && ./scripts/transform-world-countries.js --regions > ./data/regions.json","data:subregions":"rm -rf ./data/cca2.json && ./scripts/transform-world-countries.js --subregions > ./data/subregions.json","cleaning":"rm -rf node_modules && rm -f yarn.lock && yarn cache clean && yarn install && watchman watch-del-all && rm -fr $TMPDIR/react-*","verify":"yarn lint && yarn build && yarn test","prepublishOnly":"yarn verify && yarn config:npm","postpublish":"yarn config:dev","deploy":"gh-pages -d web-build","predeploy":"yarn verify && expo build:web && mkdir web-build/countries && cp ./data/countries.json web-build/countries/index.json","prepare":"npm run build"},"keywords":["react-native","components","country-picker","country","flag"],"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com","url":"https://xaviercarpentier.com/"},"license":"MIT","bugs":{"url":"https://github.com/bradryan/react-native-country-picker-modal/issues"},"homepage":"http://xcarpentier.github.io/react-native-country-picker-modal","dependencies":{"@callstack/react-theme-provider":"3.0.9","fuse.js":"3.4.5","node-emoji":"1.11.0","react-async-hook":"4.0.0"},"devDependencies":{"@babel/core":"^7.23.0","@babel/eslint-parser":"^7.22.15","@babel/preset-env":"^7.22.20","@types/jest":"29.5.5","@types/node-emoji":"1.8.2","@types/react":"18.2.24","@types/react-native":"0.72.3","@types/react-test-renderer":"18.0.3","@typescript-eslint/eslint-plugin":"^6.7.4","@typescript-eslint/parser":"^6.7.4","babel-cli":"6.26.0","babel-jest":"29.7.0","babel-preset-expo":"^9.5.2","eslint":"^8.50.0","eslint-config-prettier":"^9.0.0","eslint-plugin-import":"^2.28.1","eslint-plugin-jsdoc":"^46.8.2","eslint-plugin-prefer-arrow":"^1.2.3","eslint-plugin-react":"^7.33.2","expo":"^49.0.13","gh-pages":"6.0.0","husky":"^8.0.3","jest":"^29.7.0","jest-expo":"^49.0.0","json":"^11.0.0","prettier":"3.0.3","react":"18.2.0","react-dom":"18.2.0","react-native":"0.72.5","react-native-web":"^0.19.9","react-test-renderer":"18.2.0","typescript":"5.2.2","world-countries":"5.0.0"},"jest":{"preset":"react-native","testEnvironment":"jsdom","moduleFileExtensions":["js","jsx","json","ts","tsx"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"babel-jest"},"testMatch":["**/*.test.ts?(x)"],"modulePathIgnorePatterns":["/example-expo","/example-slack-message"]},"husky":{"hooks":{"pre-commit":"yarn lint && yarn tsc"}},"resolutions":{"mem":"^4.0.0"},"_id":"@bradryan/react-native-country-picker-modal@2.0.0","gitHead":"f72f220888c3e9716560afbd0bbbc743b85dfb6f","_nodeVersion":"20.14.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6JaQfbiDD5lzd5dMN9mc7r+z+VFNNLbd0cvLmDQ2B0MPWZGSoMQIfdvYP2RJslhsWx7R2G6OdFZ8YCtYXgcnbw==","shasum":"3a5d371a21a94b2cbd3e3a5d194b80bd00d913f4","tarball":"https://registry.npmjs.org/@bradryan/react-native-country-picker-modal/-/react-native-country-picker-modal-2.0.0.tgz","fileCount":9,"unpackedSize":26333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnRHzcMdr3yxDY6yAecmzMeQA3RvfY7LZF46LKVRpbXQIgLPyLzGrJOsiUApCrwUZERNdAWwhNLwX/xYWGuHe+qTs="}]},"_npmUser":{"name":"bradryan","email":"bradryan7@gmail.com"},"directories":{},"maintainers":[{"name":"bradryan","email":"bradryan7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-country-picker-modal_2.0.0_1726928691564_0.5640176217126582"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-21T14:24:51.444Z","2.0.0":"2024-09-21T14:24:51.858Z","modified":"2024-09-21T14:24:52.175Z"},"maintainers":[{"name":"bradryan","email":"bradryan7@gmail.com"}],"description":"react-native country picker","homepage":"http://xcarpentier.github.io/react-native-country-picker-modal","keywords":["react-native","components","country-picker","country","flag"],"repository":{"type":"git","url":"git+https://github.com/bradryan/react-native-country-picker-modal.git"},"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com","url":"https://xaviercarpentier.com/"},"bugs":{"url":"https://github.com/bradryan/react-native-country-picker-modal/issues"},"license":"MIT","readme":"

\n Country Picker for React Native.\n

\n\n

\n \n \n \n \n

\n\n| iOS | Android | Web |\n| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| | | |\n\n## Demo\n\n- 🎉[ GO TO WEB DEMO ](http://xcarpentier.github.io/react-native-country-picker-modal/) 🎉\n- [snack example](https://snack.expo.io/@xcarpentier/bossy-marshmallows)\n\n## Installation\n\n```bash\n$ yarn add react-native-country-picker-modal\n```\n\n## Basic Usage\n\nFor more complete example open [App.tsx](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/App.tsx)\n\n```tsx\nimport React, { useState } from 'react'\nimport { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native'\nimport CountryPicker from 'react-native-country-picker-modal'\nimport { CountryCode, Country } from './src/types'\n\nconst styles = StyleSheet.create({\n // ...\n})\n\nexport default function App() {\n const [countryCode, setCountryCode] = useState('FR')\n const [country, setCountry] = useState(null)\n const [withCountryNameButton, setWithCountryNameButton] = useState(\n false,\n )\n const [withFlag, setWithFlag] = useState(true)\n const [withEmoji, setWithEmoji] = useState(true)\n const [withFilter, setWithFilter] = useState(true)\n const [withAlphaFilter, setWithAlphaFilter] = useState(false)\n const [withCallingCode, setWithCallingCode] = useState(false)\n const onSelect = (country: Country) => {\n setCountryCode(country.cca2)\n setCountry(country)\n }\n return (\n \n Welcome to Country Picker !\n \n \n )\n}\n```\n\n## Props\n\n- `countryCode`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252)\n- `region?`:[Region](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L272)\n- `subregion?`: [Subregion](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L282)\n- `countryCodes?`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254)\n- `theme?`: [Theme](https://github.com/xcarpentier/react-native-country-picker-modal/blob/7611d34fa35744dbec3fbcdd9b4401494b1ba8c4/src/CountryTheme.ts#L5)\n- `translation?`: [TranslationLanguageCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L309)\n- `modalProps?`: [ModalProps](https://facebook.github.io/react-native/docs/modal#props)\n- `filterProps?`: [CountryFilterProps](https://facebook.github.io/react-native/docs/textinput#props)\n- `flatListProps?`: [FlatListProps](https://facebook.github.io/react-native/docs/flatlist#props)\n- `withAlphaFilter?`: boolean\n- `withCallingCode?`: boolean\n- `withCurrency?`: boolean\n- `withEmoji?`: boolean\n- `withCountryNameButton?`: boolean\n- `withCurrencyButton?`: boolean\n- `withCallingCodeButton?`: boolean\n- `withFlagButton?`: boolean\n- `withCloseButton?`: boolean\n- `withFilter?`: boolean\n- `withFlag?`: boolean\n- `withModal?`: boolean\n- `visible?`: boolean\n- `containerButtonStyle?`: `StyleProp`\n- `renderFlagButton?`(props: (FlagButton['props'])): ReactNode ([FlagButton props](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/FlagButton.tsx#L73))\n- `renderCountryFilter?`(props: CountryFilter['props']): ReactNode ([CountryFilter props is TextInputProps](https://facebook.github.io/react-native/docs/textinput#props))\n- `onSelect`(country: Country): void ([Country](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L263))\n- `onOpen`(): void\n- `onClose`(): void\n- `closeButtonImage?`: [ImageSourcePropType](https://facebook.github.io/react-native/docs/image#props)\n- `closeButtonStyle?`: StyleProp\n- `closeButtonImageStyle?`: StyleProp\n- `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)\n- `preferredCountries`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254) preferred countries they appear first (`withAlphaFilter` must be false)\n\n## Dark theme example\n\n

\n \"react-native-country-picker-modal-dark\"\n

\n\nA simple example to display a `CountryPicker` component with a dark theme.\n\n```tsx\nimport CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal'\n\nconst MyDarkView = () => \n```\n\n## Dependencies\n\n- world-countries : https://www.npmjs.com/package/world-countries\n\n## FAQ\n\n### Is it supported and tested both on android and iOS?\n\nYES\n\n### Is the data that is populated inside the list saved offline once I install your package?\n\nYES : It used the world-countries package and image is stored into json and base64.\n\n## Tiers lib using this lib\n\n- [react-native-phone-verification](https://github.com/joinspontaneous/react-native-phone-verification)\n\n[> Your project?](https://github.com/xcarpentier/react-native-linkedin/issues/new)\n\n## See also\n\n- [react-native-linkedin](https://github.com/xcarpentier/react-native-linkedin)\n\n## Contribution\n\n- [@xcapentier](mailto:contact@xaviercarpentier.com) The main author.\n\n## Questions\n\nFeel free to [contact me](mailto:contact@xaviercarpentier.com) or [create an issue](https://github.com/xcarpentier/react-native-country-picker/issues/new)\n\n> made with ♥\n\n## Licence\n\n[MIT](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/LICENSE.md)\n\n## Hire an expert!\n\nLooking for a ReactNative freelance expert with more than 12 years experience? Contact me from my [website](https://xaviercarpentier.com)!\n","readmeFilename":"README.md"}