{"_id":"@app2one/react-native-country-picker-modal","_rev":"2-16757c312d345469e7f3543038e51d10","name":"@app2one/react-native-country-picker-modal","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@app2one/react-native-country-picker-modal","version":"0.1.1","description":"Country picker","main":"src/CountryPicker.js","scripts":{"lint":"eslint ./src","flow":"./node_modules/flow-bin/cli.js","test":"node_modules/jest/bin/jest.js","gendata":"rm -rf ./data/countries.json && babel-node ./scripts/transform-world-countries.js > ./data/countries.json","gendata-emoji":"rm -rf ./data/countries-emoji.json && babel-node ./scripts/transform-world-countries.js --emoji > ./data/countries-emoji.json","gendata-cca2":"rm -rf ./data/cca2.json && babel-node ./scripts/transform-world-countries.js --cca2 > ./data/cca2.json","bump-patch-push":"yarn version --new-version `./scripts/version_increment.js patch` && git push --follow-tags","bump-minor-push":"yarn version --new-version `./scripts/version_increment.js minor` && git push --follow-tags","bump-major-push":"yarn version --new-version `./scripts/version_increment.js major` && git push --follow-tags","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0","cleaning":"rm -rf node_modules && rm -f yarn.lock && yarn cache clean && yarn install && watchman watch-del-all && rm -fr $TMPDIR/react-*"},"keywords":["react-native","components","country-picker","country","flag"],"license":"MIT","bugs":{"url":"https://github.com/xcarpentier/react-native-country-picker-modal/issues"},"homepage":"https://github.com/xcarpentier/react-native-country-picker-modal#readme","dependencies":{"fuse.js":"2.6.2","lodash":"4.12.0","node-emoji":"1.8.1","prop-types":"15.6.0","react-native-safe-area-view":"^0.7.0","world-countries":"1.8.0"},"devDependencies":{"@types/react":"^16.4.6","@types/react-native":"^0.55.26","babel-cli":"6.14.0","babel-eslint":"6.1.2","babel-jest":"23.0.1","babel-preset-react-native":"4.0.0","eslint":"^3.3.1","eslint-config-airbnb":"^10.0.0","eslint-plugin-async":"0.1.1","eslint-plugin-babel":"3.3.0","eslint-plugin-import":"^1.12.0","eslint-plugin-jsx-a11y":"^2.0.1","eslint-plugin-react":"^6.0.0","eslint-plugin-react-native":"2.0.0","flow-bin":"^0.57.3","jest":"^23.1.0","react":"16.0.0","react-native":"0.50.3","react-test-renderer":"16.0.0","regenerator-runtime":"0.11.1","typescript":"^2.9.2"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["/example/"]},"_id":"@app2one/react-native-country-picker-modal@0.1.1","_npmVersion":"6.4.1","_nodeVersion":"10.5.0","_npmUser":{"name":"plamapp2one","email":"plam@app2one.com"},"dist":{"integrity":"sha512-5jfpMBh+mtIiliMPqauipVZYOZjTStwehir1z38Efygfi87JqO/Fu07ZLPqdLV8y6sbtMj1IpEgqkgHnBpeF4g==","shasum":"af6dc0fc918889a7a1db5fcc536543383dfd9a8e","tarball":"https://registry.npmjs.org/@app2one/react-native-country-picker-modal/-/react-native-country-picker-modal-0.1.1.tgz","fileCount":32,"unpackedSize":2174806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwDdYCRA9TVsSAnZWagAAofIQAIwM5tW79vfQ5Qtni3Fu\nW1IXKAcWsnEHdi7kgVcyTZ1/QYKuKKC9sfhPH0muJ/avbd6InrJYUOGVF7vE\nJJcZhwRym1Hng0UxVFFarAJQwBOS6h7quHkOafL8ibBUlm3/xMsGDHwj5maP\niUqpV3FhcXDiFH5ywFk4LDWsiXC7F2gBRLDVy6yJCNnmOvYYRpxmA4ZtNUTN\np8y0KDIo1nMP3wnZ67gEYIHGn0tZWL807a4teRdlSP3gfZojpsVauQVulQFd\np0nRqauYsMAWQVrLIrA6xsqDSnqwm11yQ5SXNylrlW3yyMFDCpEPVjAMsJSB\nYPqFPtJwAjz2rgbNsT2ZzRarR+CKjeRvm7HLAAETIWQK4ieOFjrCCr6LsbsW\n7QMRcc447PetEte5yhaDyIhD6b8ta1EgbbGatsExLKxywCAoQ34y4OaGT5/J\nmVgGc+DrOFST/xj+2iNuHVpipJ0BymmGaBePG8+ngRR6Wl4MxB5lna7sir4w\nS0uk/tr7LAeKZKTnZs3MmV4ogYIb/EQzVok8zLLd/D4rQ7sqzH+b5VdAmFS5\nsMBJTCEOsomj2DW2v/33Jt99eDIbS8wByzEM3hsu+SJwQe8R/JAlamf6OMFT\njL7pZ7z7YLHXyFIXT/JkmfpdMl/Bg9aCaT7ZQKqctV3GWR3i+tC1pJcWv2+H\nl5kf\r\n=k3Ml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBE7G6W2g2rnjvAmyQtyEjZarNb45MBhbNajT89ThnRgIgQHIOuQz0a9fhjsffW/ieqSEk22ds6SWqL0CLlgQt+QY="}]},"maintainers":[{"name":"mtsui","email":"mtsui@app2one.com"},{"name":"plamapp2one","email":"plam@app2one.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-country-picker-modal_0.1.1_1539323736091_0.707222360656373"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-12T05:55:35.932Z","0.1.1":"2018-10-12T05:55:36.298Z","modified":"2022-04-04T14:43:27.954Z"},"maintainers":[{"email":"plam@app2one.com","name":"plamapp2one"}],"description":"Country picker","homepage":"https://github.com/xcarpentier/react-native-country-picker-modal#readme","keywords":["react-native","components","country-picker","country","flag"],"bugs":{"url":"https://github.com/xcarpentier/react-native-country-picker-modal/issues"},"license":"MIT","readme":"

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

\n\n

\n The best Country Picker for React Native.\n

\n\n

\n \n \n \n \n \n

\n\n

\n \n
\n Demo on Expo\n

\n\n
\n\n## Installation\n\n```bash\n$ yarn add react-native-country-picker-modal\n```\n\n## Basic Usage\n\n```jsx\nimport DeviceInfo from 'react-native-device-info'\n\nimport React, {\n AppRegistry,\n Component,\n StyleSheet,\n Text,\n View,\n StatusBarIOS,\n PixelRatio\n} from 'react-native'\nimport CountryPicker, {\n getAllCountries\n} from 'react-native-country-picker-modal'\n\nconst NORTH_AMERICA = ['CA', 'MX', 'US']\n\nclass Example extends Component {\n constructor(props) {\n StatusBarIOS.setHidden(true)\n super(props)\n let userLocaleCountryCode = DeviceInfo.getDeviceCountry()\n const userCountryData = getAllCountries()\n .filter(country => NORTH_AMERICA.includes(country.cca2))\n .filter(country => country.cca2 === userLocaleCountryCode)\n .pop()\n let callingCode = null\n let cca2 = userLocaleCountryCode\n if (!cca2 || !userCountryData) {\n cca2 = 'US'\n callingCode = '1'\n } else {\n callingCode = userCountryData.callingCode\n }\n this.state = {\n cca2,\n callingCode\n }\n }\n render() {\n return (\n \n Welcome to Country Picker !\n {\n this.setState({ cca2: value.cca2, callingCode: value.callingCode })\n }}\n cca2={this.state.cca2}\n translation=\"eng\"\n />\n press on the flag\n {this.state.country && (\n \n {JSON.stringify(this.state.country, null, 2)}\n \n )}\n \n )\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center'\n },\n welcome: {\n fontSize: 20,\n textAlign: 'center',\n margin: 10\n },\n instructions: {\n fontSize: 12,\n textAlign: 'center',\n color: '#888',\n marginBottom: 5\n },\n data: {\n padding: 15,\n marginTop: 10,\n backgroundColor: '#ddd',\n borderColor: '#888',\n borderWidth: 1 / PixelRatio.get(),\n color: '#777'\n }\n})\n\nAppRegistry.registerComponent('example', () => Example)\n```\n\n## Dark theme example\n

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

\n\nA simple example to display a `CountryPicker` component with a dark theme. You need to download a light colored image for the close button, for example [this one](https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/VisualEditor_-_Icon_-_Close_-_white.svg/240px-VisualEditor_-_Icon_-_Close_-_white.svg.png).\n```jsx\nimport CountryPicker from 'react-native-country-picker-modal'\n\n// change the import path according to your project structure\nimport closeImgLight from \"/asset/iconWhite.png\";\n\nconst DARK_COLOR = \"#18171C\";\nconst PLACEHOLDER_COLOR = \"rgba(255,255,255,0.2)\";\nconst LIGHT_COLOR = \"#FFF\";\n\n\nexport default (props) => (\n \n);\n\n\nconst darkTheme = StyleSheet.create({\n modalContainer: {\n backgroundColor: DARK_COLOR\n },\n contentContainer: {\n backgroundColor: DARK_COLOR\n },\n header: {\n backgroundColor: DARK_COLOR\n },\n itemCountryName: {\n borderBottomWidth: 0\n },\n countryName: {\n color: LIGHT_COLOR\n },\n letterText: {\n color: LIGHT_COLOR\n },\n input: {\n color: LIGHT_COLOR,\n borderBottomWidth: 1,\n borderColor: LIGHT_COLOR\n }\n});\n```\n\n## Props\n\n| Key | Type | Default | Description |\n| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |\n| cca2 | string | \\*required | code ISO 3166-1 alpha-2 (ie. FR, US, etc.) |\n| translation | string | 'eng' | The language display for the name of the country (deu, fra, hrv, ita, jpn, nld, por, rus, spa, svk, fin, zho, cht cym) |\n| onChange | function | \\*required | The handler when a country is selected |\n| onClose | function | \\*required | The handler when the close button is clicked |\n| countryList | array | See [cca2.json](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/data/cca2.json) | List of custom CCA2 countries to render in the list. Use getAllCountries to filter what you need if you want to pass in a custom list |\n| excludeCountries | array | [] | List of custom CCA2 countries you don't want to render |\n| closeable | bool | false | If true, the CountryPicker will have a close button |\n| filterable | bool | false | If true, the CountryPicker will have search bar |\n| filterPlaceholder | string | 'Filter' | The search bar placeholder |\n| filterPlaceholderTextColor | string | undefined | The search bar placeholder text color |\n| autoFocusFilter | bool | true | Whether or not the search bar should be autofocused |\n| styles | object | {} | Override any style specified in the component (see source code) |\n| disabled | bool | false | Whether or not the Country Picker onPress is disabled |\n| transparent | bool | false | If true, the CountryPicker will render the modal over a transparent background |\n| animationType | string |'none' | The handler that controls how the modal animates |\n| closeButtonImage | React.element| default close button Image | Custom close button Image\n| flagType | string | 'emoji' on iOS, 'flat' on Android | If set, overwrites the default OS based flag type.\n| hideAlphabetFilter | bool | false | If set to true, prevents the alphabet filter rendering\n| showCallingCode | bool | false | If set to true, Country Picker List will show calling code after country name `United States (+1)`\n| renderFilter | Function | undefined | If 'filterable={true}' and renderFilter function is provided, render custom filter component.\\*\n\n\\* \n```js\nrenderFilter = ({value, onChange, onClose}) => (\n \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","readmeFilename":"README.md"}