{"_id":"@adhammahmoud98/react-native-country-picker-modal","_rev":"1-d3bf57e4993b25db69dc551d2a44e837","name":"@adhammahmoud98/react-native-country-picker-modal","dist-tags":{"latest":"2.2.0"},"versions":{"2.2.0":{"name":"@adhammahmoud98/react-native-country-picker-modal","version":"2.2.0","description":"react-native country picker","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/AdhamMahmoud98/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 && cp -rf ./src/assets ./lib && 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":"tslint --project .","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 build && yarn test","prepublishOnly":"yarn config:npm","postpublish":"yarn config:dev","deploy":"gh-pages -d web-build","predeploy":"expo build:web && mkdir web-build/countries && cp ./data/countries.json web-build/countries/index.json"},"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/xcarpentier/react-native-country-picker-modal/issues"},"homepage":"http://xcarpentier.github.io/react-native-country-picker-modal","dependencies":{"@callstack/react-theme-provider":"3.0.3","fuse.js":"3.4.5","node-emoji":"1.10.0","prop-types":"15.7.2","react-async-hook":"3.6.1"},"devDependencies":{"@types/jest":"24.0.17","@types/node-emoji":"1.8.1","@types/prop-types":"15.7.3","@types/react":"16.9.4","@types/react-native":"0.60.17","@types/react-test-renderer":"16.9.1","babel-cli":"6.14.0","babel-eslint":"6.1.2","babel-jest":"24.9.0","babel-preset-expo":"^7.0.0","expo":"^35.0.0","gh-pages":"2.1.1","husky":"^3.0.0","jest-expo":"^35.0.0","json":"^9.0.6","prettier":"1.18.0","react":"16.8.3","react-dom":"16.8.3","react-native":"https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz","react-native-web":"^0.13.18","react-test-renderer":"16.8.3","tslint":"5.12.0","tslint-config-prettier":"1.17.0","typescript":"3.4.5","world-countries":"2.1.0"},"jest":{"preset":"react-native","moduleFileExtensions":["js","jsx","json","ts","tsx"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"babel-jest"},"testMatch":["**/*.test.ts?(x)"],"modulePathIgnorePatterns":["<rootDir>/example-expo","<rootDir>/example-slack-message"]},"husky":{"hooks":{"pre-commit":"yarn lint && yarn tsc"}},"resolutions":{"mem":"^4.0.0"},"_id":"@adhammahmoud98/react-native-country-picker-modal@2.2.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-/NLGhjl9Z/k7ENW9ATf2K7llbzAGjol4oq0+Ciyd8tUgU3qg25/MLh5gwDE+4jk5oSKNvfAHZGZhQuVsGQnJhA==","shasum":"b57bf42e498bb7ddd12c0ba8049b5930bdfc9e89","tarball":"https://registry.npmjs.org/@adhammahmoud98/react-native-country-picker-modal/-/react-native-country-picker-modal-2.2.0.tgz","fileCount":5,"unpackedSize":14190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNywgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv+g/+J0SsPDSAWC+Wu6wCUGdELG6qfCJNOZb5AQzApmtTyBwwrN2G\r\nYrdgp2P79oFseiM70Nyh0zWptUPgSkc1bNvsXEHFxiLW8XQWd+DH4q0r/GeL\r\nNEC8irrCHDDZpipeAbYxVhTy5WwcSzlrEZXxFLOpI8yZVcRxW1EuOodoyRTS\r\nZg1OMtG7r8Vgg0rMri3aaWQpasE7b0SUSBvUxwINaN9VPZcBPRXHt0abji7T\r\n9vV0gQWKZXwBorkyF9wViF+3dQ3NwWm0t+dfPlhVjoTsjSx0FHpYAyoojqa6\r\neWx7aU+Wj8XY1fAS42QyUbeNvxaD/M+tVBZGxZzuenKz3wB1w1OxtMX+iG9Y\r\nHs3DT9hCGzXmGWdfMTQfJ5X9K5oat8p0U9QNjkpEaHjasvX0ev95iX4zVX1q\r\n16efbgKThzw86BZL2zXRj/WGDcELuTStnB1k9IKW1Qjs9wR1x3EitUNGhtx0\r\nE0fo5qTDuIuAiW45FsFsn/jZIetFfdIzyHFYmvQ0Co7b2yGhbKx+TM3ru/Gp\r\nizubQdz7sMdRa6alTnsOxREGQjob8cso8QLnEamKAWUuHJU9AP9n0Vte0vKg\r\nxP2U9Q5w+EN31U6/L+X+/9VcY01xID4NWgtBAec2Bh0+pMJVLACWPqRdLLcB\r\n+22AduZUxc9l8djjjND19Ki4jZmtd6SrxnU=\r\n=fSdC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcRezMf01oAfj+CWPohYqsSMW9V5Czmspke+kNVofRsgIgVJt27Qy8ogTeHiVeCrc5/eNKAK7lMaFXNPMYaq25lss="}]},"_npmUser":{"name":"adhammahmoud98","email":"adhammahmoud6@gmail.com"},"directories":{},"maintainers":[{"name":"adhammahmoud98","email":"adhammahmoud6@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-country-picker-modal_2.2.0_1647782944012_0.3684858574441552"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-20T13:29:03.948Z","2.2.0":"2022-03-20T13:29:04.147Z","modified":"2022-04-04T11:29:31.985Z"},"maintainers":[{"name":"adhammahmoud98","email":"adhammahmoud6@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/AdhamMahmoud98/react-native-country-picker-modal.git"},"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com","url":"https://xaviercarpentier.com/"},"bugs":{"url":"https://github.com/xcarpentier/react-native-country-picker-modal/issues"},"license":"MIT","readme":"<h3>\n  Country Picker for React Native.\n</h3>\n\n<p>\n   <a href=\"https://reactnative.gallery/xcarpentier/country-picker\"><img src=\"https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg\"/></a>\n  <a href=\"https://www.npmjs.com/package/react-native-country-picker-modal\"><img src=\"https://img.shields.io/npm/v/react-native-country-picker-modal.svg?style=flat-square\"></a>\n  <a href=\"https://www.npmjs.com/package/react-native-country-picker-modal\"><img src=\"https://img.shields.io/npm/dm/react-native-country-picker-modal.svg?style=flat-square\"></a>\n  <a href=\"#hire-an-expert\"><img src=\"https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen\"/></a>\n</p>\n\n| iOS                                                                                               | Android                                                                                           | Web                                                                                               |\n| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| <img  src=\"https://media.giphy.com/media/cKmlP4Ue5pUrH0DQLi/giphy.gif\" width=\"200\" height=\"400\"/> | <img  src=\"https://media.giphy.com/media/Q7SDti4eARGx2CQIGE/giphy.gif\" width=\"200\" height=\"400\"/> | <img  src=\"https://media.giphy.com/media/gKl3z3c7sVVL7KSSh8/giphy.gif\" width=\"250\" height=\"400\"/> |\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<CountryCode>('FR')\n  const [country, setCountry] = useState<Country>(null)\n  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(\n    false,\n  )\n  const [withFlag, setWithFlag] = useState<boolean>(true)\n  const [withEmoji, setWithEmoji] = useState<boolean>(true)\n  const [withFilter, setWithFilter] = useState<boolean>(true)\n  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)\n  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)\n  const onSelect = (country: Country) => {\n    setCountryCode(country.cca2)\n    setCountry(country)\n  }\n  return (\n    <View style={styles.container}>\n      <Text style={styles.welcome}>Welcome to Country Picker !</Text>\n      <Option\n        title='With country name on button'\n        value={withCountryNameButton}\n        onValueChange={setWithCountryNameButton}\n      />\n      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />\n      <Option\n        title='With emoji'\n        value={withEmoji}\n        onValueChange={setWithEmoji}\n      />\n      <Option\n        title='With filter'\n        value={withFilter}\n        onValueChange={setWithFilter}\n      />\n      <Option\n        title='With calling code'\n        value={withCallingCode}\n        onValueChange={setWithCallingCode}\n      />\n      <Option\n        title='With alpha filter code'\n        value={withAlphaFilter}\n        onValueChange={setWithAlphaFilter}\n      />\n      <CountryPicker\n        {...{\n          countryCode,\n          withFilter,\n          withFlag,\n          withCountryNameButton,\n          withAlphaFilter,\n          withCallingCode,\n          withEmoji,\n          onSelect,\n        }}\n        visible\n      />\n      <Text style={styles.instructions}>Press on the flag to open modal</Text>\n      {country !== null && (\n        <Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>\n      )}\n    </View>\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<Country>](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<ViewStyle>`\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<ViewStyle>\n- `closeButtonImageStyle?`: StyleProp<ImageStyle>\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<p align=\"center\">\n    <img alt=\"react-native-country-picker-modal-dark\" src=\"https://user-images.githubusercontent.com/2692166/40585272-094f817a-61b0-11e8-9668-abff0aeddb0e.png\" width=150>\n</p>\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 = () => <CountryPicker theme={DARK_THEME} />\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"}