{"_id":"@bo7mid3/react-native-paper-select","name":"@bo7mid3/react-native-paper-select","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@bo7mid3/react-native-paper-select","version":"0.3.0","description":"Material Design Select Dropdown Component using React Native Paper","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android","select","multi-select","react-native-paper","dropdown","material"],"repository":{"type":"git","url":"git+https://github.com/srivastavaanurag79/react-native-paper-select.git"},"author":{"name":"Anurag Srivastava","email":"srivastavaanurag79@gmail.com","url":"https://github.com/srivastavaanurag79"},"license":"MIT","bugs":{"url":"https://github.com/srivastavaanurag79/react-native-paper-select/issues"},"homepage":"https://github.com/srivastavaanurag79/react-native-paper-select#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"^0.66.11","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.0","release-it":"^14.2.2","typescript":"^4.1.3"},"peerDependencies":{"@types/react":"*","@types/react-native":"*","react":"*","react-native":"*","react-native-paper":"*","react-native-vector-icons":"*","typescript":"*"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"51e649f0bd84f3be921cd41342c7ee35d180dd15","_id":"@bo7mid3/react-native-paper-select@0.3.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-SiNMMkkYu0BIdXEyNK9q5QD6k2FWlsM3RubXE1aGvK0riivIvIFLvCUy4YRv5iWPiytF3pi/lUeTd1XhCbciMw==","shasum":"e9e65cd993bcdc851a7c04ae4c98a2ef6d9211d7","tarball":"https://registry.npmjs.org/@bo7mid3/react-native-paper-select/-/react-native-paper-select-0.3.0.tgz","fileCount":33,"unpackedSize":109565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZxNipShVABNEZKcQvUZg34WHVPIyHntqxOz+mKa5VrAIhAIXEHSzFqJDZ8P76MknCfBXCYgOP3ZqrK/56pKRUkktI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7OM/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6lQ/+Luj4Rfr23yIYlTJ6FhVlqR/MFncuw4cOtSQaesZ1krmPcTJa\r\nGegszf/4t0gTrQDT7iKf5PS1YedBV7FiPiRxy+RYt3saElXHeuIG30Gn2Tfl\r\nmhUWenWPPY2sYW1JrhOenGcFbUk1Uesx5Gl6ebuPQcdpGCg/hRSNgQjhMg4k\r\nGO5oOzmXP5f3+nPfu03ZWvQaHtGtKZSa0nnmBmrkHS8gPbS5Pner+DOjdP+N\r\nRC0pP42jGvUywNHMlxyliKu/Gd2c9MgM37GopLu3qOPXg56ZTjk+iB4rGVO5\r\nsTpY8q8YxHtpblZ7c57M2cNKFsWd57cE4uKSgyIjZw/z1rebHQF9lyu+S5e6\r\nEbagDleSg7fDfX68QEkgkXzgQ6PNLYVfDvpH9P6cmbTh2T1iRVrZ8HcHed+W\r\nC9rolHZZTz/R+XySMjDX2vI7u488uYey4C4arMald3XT5Fb49IJ/ETUuwvaI\r\nF+iyOqflVKTHuQ4LRE4mXIh9wa+DlW/aCqKqZLRajKA+/GchdWVwDyD2lIul\r\nUHCvVpXh1CoXnAx5gooQY2aBeB1dklVzCqa42O3ZZFhF/lA9fj5KJ6F6nI0b\r\n5V7JbXIM80dfAHFbl1TBVFTPj1199XsphAicsXoOtn2CkpL0UhE3rhg7YP4j\r\nBkx7ajg5KpyVSmgCJcI01ED9pPTBbhXJBks=\r\n=Nw2K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bo7mid3","email":"ahmedbahloul2526@gmail.com"},"directories":{},"maintainers":[{"name":"bo7mid3","email":"ahmedbahloul2526@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-paper-select_0.3.0_1659691839530_0.2801656073889236"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-05T09:30:39.473Z","0.3.0":"2022-08-05T09:30:39.742Z","modified":"2022-08-05T09:30:39.970Z"},"maintainers":[{"name":"bo7mid3","email":"ahmedbahloul2526@gmail.com"}],"description":"Material Design Select Dropdown Component using React Native Paper","homepage":"https://github.com/srivastavaanurag79/react-native-paper-select#readme","keywords":["react-native","ios","android","select","multi-select","react-native-paper","dropdown","material"],"repository":{"type":"git","url":"git+https://github.com/srivastavaanurag79/react-native-paper-select.git"},"author":{"name":"Anurag Srivastava","email":"srivastavaanurag79@gmail.com","url":"https://github.com/srivastavaanurag79"},"bugs":{"url":"https://github.com/srivastavaanurag79/react-native-paper-select/issues"},"license":"MIT","readme":"# React Native Paper Select 🔽\r\n\r\n[![Version](https://img.shields.io/npm/v/react-native-paper-select.svg)](https://www.npmjs.com/package/react-native-paper-select)\r\n[![Dependency Status](https://img.shields.io/npm/dt/react-native-paper-select.svg)](https://www.npmjs.com/package/react-native-paper-select)\r\n[![License](https://img.shields.io/npm/l/react-native-paper-select.svg)](https://www.npmjs.com/package/react-native-paper-select)\r\n[![Github](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/srivastavaanurag79/react-native-paper-select)\r\n[![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\r\n[![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactnative.dev/)\r\n\r\n- This module includes a customizable multi-select and a single select component for **React Native Paper**.\r\n- The package is both **Android** and **iOS** compatible.\r\n- The package is well-typed and supports **TypeScript**.\r\n- Smooth and fast.\r\n- Type-safe\r\n\r\n**Give us a GitHub star 🌟, if you found this package useful.**\r\n[![GitHub stars](https://img.shields.io/github/stars/srivastavaanurag79/react-native-paper-select.svg?style=social&label=Star&maxAge=2592000)](https://github.com/srivastavaanurag79/react-native-paper-select)\r\n\r\n[React Native Paper Select (NPM Link)](https://www.npmjs.com/package/react-native-paper-select)\r\n\r\n## Would you like to support me?\r\n\r\n<a href=\"https://www.buymeacoffee.com/pixmita\"><img src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a tea&emoji=🍵&slug=pixmita&button_colour=5F7FFF&font_colour=ffffff&font_family=Poppins&outline_colour=000000&coffee_colour=FFDD00\"></a>\r\n\r\n## Demo/Screenshots\r\n\r\n<p float=\"left\">\r\n<img style=\"border: 1px solid; margin: 10px\" src=\"demo.gif\" alt=\"React Native Paper Select\" width=\"175\" />\r\n  <img style=\"border: 1px solid; margin: 10px\"  src=\"demo1.png\" alt=\"React Native Paper Select\" width=\"150\" />\r\n  <img style=\"border: 1px solid; margin: 10px\"  src=\"demo2.png\" alt=\"React Native Paper Select\" width=\"150\" />\r\n  <img style=\"border: 1px solid; margin: 10px\"  src=\"demo3.png\" alt=\"React Native Paper Select\" width=\"150\" />\r\n  <img style=\"border: 1px solid; margin: 10px\"  src=\"demo4.png\" alt=\"React Native Paper Select\" width=\"150\" />\r\n</p>\r\n\r\n## Dependencies\r\n\r\n```bash\r\nreact-native-paper\r\nreact-native-vector-icons\r\n```\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install react-native-paper-select\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add react-native-paper-select\r\n```\r\n\r\n## Basic Usage (Multi-Select)\r\n\r\n```js\r\nimport { PaperSelect } from 'react-native-paper-select';\r\n\r\n// ...\r\n\r\nconst [colors, setColors] = useState({\r\n  value: '',\r\n  list: [\r\n    { _id: '1', value: 'BLUE' },\r\n    { _id: '2', value: 'RED' },\r\n    { _id: '3', value: 'GREEN' },\r\n    { _id: '4', value: 'YELLOW' },\r\n    { _id: '5', value: 'BROWN' },\r\n    { _id: '6', value: 'BLACK' },\r\n    { _id: '7', value: 'WHITE' },\r\n    { _id: '8', value: 'CYAN' },\r\n  ],\r\n  selectedList: [],\r\n  error: '',\r\n});\r\n\r\n<PaperSelect\r\n  label=\"Select Colors\"\r\n  value={colors.value}\r\n  onSelection={(value: any) => {\r\n    setColors({\r\n      ...colors,\r\n      value: value.text,\r\n      selectedList: value.selectedList,\r\n      error: '',\r\n    });\r\n  }}\r\n  arrayList={[...colors.list]}\r\n  selectedArrayList={colors.selectedList}\r\n  errorText={colors.error}\r\n  multiEnable={true}\r\n  textInputMode=\"flat\"\r\n  searchStyle={{ iconColor: 'red' }}\r\n/>;\r\n```\r\n\r\n## Basic Usage (Single-Select)\r\n\r\n```js\r\nimport { PaperSelect } from 'react-native-paper-select';\r\n\r\n// ...\r\n\r\n<PaperSelect\r\n  label=\"Select Gender\"\r\n  value={gender.value}\r\n  onSelection={(value: any) => {\r\n    setGender({\r\n      ...gender,\r\n      value: value.text,\r\n      selectedList: value.selectedList,\r\n      error: '',\r\n    });\r\n  }}\r\n  arrayList={[...gender.list]}\r\n  selectedArrayList={gender.selectedList}\r\n  errorText={gender.error}\r\n  multiEnable={false}\r\n  dialogTitleStyle={{ color: 'red' }}\r\n  checkboxColor=\"yellow\"\r\n  checkboxLabelStyle={{ color: 'red', fontWeight: '700' }}\r\n  textInputBackgroundColor=\"yellow\"\r\n  textInputColor=\"red\"\r\n/>;\r\n```\r\n\r\n### Props\r\n\r\n| props                      | type                                                                                                                                                                       | description                                                                                                          | default value                                                                      | required |\r\n| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------- |\r\n|   label                    | string                                                                                                                                                                     | Input Label                                                                                                          | set to empty string if you don’t want to display                                   | yes      |\r\n|   arrayList                | Array<{  \\_id: string; value: string;}>                                                                                                                                    | Array of items. Should be an array of objects with \\_id and value property.example: \\[{\"\\_id\": 1, \"value\": \"Red\"}\\]. | there isn't any default value you need to specify a list.                          | yes      |\r\n|   selectedArrayList        | Array<{  \\_id: string; value: string;}>                                                                                                                                    | selected elements or preselected elements                                                                            | set empty array as default                                                         | yes      |\r\n|   multiEnable              | boolean                                                                                                                                                                    | true if you want to use multi select, false if you want single select                                                | no default value                                                                   | yes      |\r\n|   errorText                | string                                                                                                                                                                     | text to display on error                                                                                             | set to empty string as default                                                     | yes      |\r\n|   value                    | string                                                                                                                                                                     | default value you want to display                                                                                    | bind it with your variable                                                         | yes      |\r\n|   dialogStyle              | {backgroundColor?: ViewStyle\\['backgroundColor'\\]; borderRadius?: ViewStyle\\['borderRadius'\\];}                                                                            | dialog box style                                                                                                     | {backgroundColor:'white', borderRadius: 5}                                         | no       |\r\n|   dialogTitleStyle         | TextStyle                                                                                                                                                                  | dialog box title style                                                                                               | default react native paper style                                                   | no       |\r\n|   searchStyle              | {backgroundColor?: ViewStyle\\['backgroundColor'\\]; textColor?: TextStyle\\['color'\\]; borderRadius?: number; borderColor?: ViewStyle\\['borderColor'\\]; iconColor?: string;} | search bar style in dialog box                                                                                       | {borderRadius:5, borderColor:'#e5e5e5', backgroundColor: '#e5e5e5', color: '#000'} | no       |\r\n|   checkboxUncheckedColor   | string                                                                                                                                                                     | checkbox unchecked color                                                                                             | #000007                                                                            | no       |\r\n|   checkboxColor            | string                                                                                                                                                                     | checkbox checked color                                                                                               | blue                                                                               | no       |\r\n|   checkboxLabelStyle       | TextStyle                                                                                                                                                                  | checkbox label style                                                                                                 | default react native paper style                                                   | no       |\r\n|   errorStyle               | TextStyle                                                                                                                                                                  | error style                                                                                                          | default react native paper style                                                   | no       |\r\n|   textInputMode            | flat or outlined                                                                                                                                                           | input style flat or outlined                                                                                         | outlined                                                                           | no       |\r\n|   underlineColor           | string                                                                                                                                                                     | underline color (if input mode is flat)                                                                              | black                                                                              | no       |\r\n|   activeUnderlineColor     | string                                                                                                                                                                     | active underline color (if input mode is flat)                                                                       | black                                                                              | no       |\r\n|   activeOutlineColor       | string                                                                                                                                                                     | active border color (if input mode is outlined)                                                                      | black                                                                              | no       |\r\n|   outlineColor             | string                                                                                                                                                                     | border color (if input mode is outlined)                                                                             | black                                                                              | no       |\r\n|   textInputBackgroundColor | string                                                                                                                                                                     | text input background color                                                                                          | white                                                                              | no       |\r\n|   textInputColor           | string                                                                                                                                                                     | text input text color                                                                                                | black                                                                              | no       |\r\n|   textInputHeight          | number                                                                                                                                                                     | text input height                                                                                                    | default react native paper style                                                   | no       |\r\n|   dialogButtonLabelStyle   | TextStyle                                                                                                                                                                  | dialog button style                                                                                                  | default react native paper style                                                   | no       |\r\n|   searchPlaceholder        | string                                                                                                                                                                     | search placeholder                                                                                                   | Search                                                                             | no       |\r\n|   modalCloseButtonText     | string                                                                                                                                                                     | Close button text in modal                                                                                           | Close                                                                              | no       |\r\n|   modalDoneButtonText      | string                                                                                                                                                                     | Done button text in modal                                                                                            | Done                                                                               | no       |\r\n\r\n### Callback Methods\r\n\r\n- `onSelection` - Return the selected item when an item is selected.\r\n  Example :\r\n\r\n  ```ts\r\n  onSelection={(value: any) => {\r\n    setGender({\r\n      ...gender,\r\n      value: value.text,\r\n      selectedList: value.selectedList,\r\n      error: '',\r\n    });\r\n  }}\r\n  ```\r\n\r\n## Example\r\n\r\n```ts\r\nimport React, { useState } from 'react';\r\n\r\nimport { Alert, StyleSheet, View } from 'react-native';\r\nimport { Button as PaperButton, Headline } from 'react-native-paper';\r\nimport { PaperSelect } from 'react-native-paper-select';\r\n\r\nexport const selectValidator = (value: any) => {\r\n  if (!value || value.length <= 0) {\r\n    return 'Please select a value.';\r\n  }\r\n\r\n  return '';\r\n};\r\n\r\nexport default function App() {\r\n  const [gender, setGender] = useState({\r\n    value: '',\r\n    list: [\r\n      { _id: '1', value: 'MALE' },\r\n      { _id: '2', value: 'FEMALE' },\r\n      { _id: '3', value: 'OTHERS' },\r\n    ],\r\n    selectedList: [],\r\n    error: '',\r\n  });\r\n  const [colors, setColors] = useState({\r\n    value: '',\r\n    list: [\r\n      { _id: '1', value: 'BLUE' },\r\n      { _id: '2', value: 'RED' },\r\n      { _id: '3', value: 'GREEN' },\r\n      { _id: '4', value: 'YELLOW' },\r\n      { _id: '5', value: 'BROWN' },\r\n      { _id: '6', value: 'BLACK' },\r\n      { _id: '7', value: 'WHITE' },\r\n      { _id: '8', value: 'CYAN' },\r\n    ],\r\n    selectedList: [],\r\n    error: '',\r\n  });\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      <Headline style={{ marginBottom: 10 }}>\r\n        React Native Paper Select\r\n      </Headline>\r\n      <PaperSelect\r\n        label=\"Select Gender\"\r\n        value={gender.value}\r\n        onSelection={(value: any) => {\r\n          setGender({\r\n            ...gender,\r\n            value: value.text,\r\n            selectedList: value.selectedList,\r\n            error: '',\r\n          });\r\n        }}\r\n        arrayList={[...gender.list]}\r\n        selectedArrayList={gender.selectedList}\r\n        errorText={gender.error}\r\n        multiEnable={false}\r\n        dialogTitleStyle={{ color: 'red' }}\r\n        checkboxColor=\"yellow\"\r\n        checkboxLabelStyle={{ color: 'red', fontWeight: '700' }}\r\n        textInputBackgroundColor=\"yellow\"\r\n        textInputColor=\"red\"\r\n      />\r\n      <PaperSelect\r\n        label=\"Select Colors\"\r\n        value={colors.value}\r\n        onSelection={(value: any) => {\r\n          setColors({\r\n            ...colors,\r\n            value: value.text,\r\n            selectedList: value.selectedList,\r\n            error: '',\r\n          });\r\n        }}\r\n        arrayList={[...colors.list]}\r\n        selectedArrayList={colors.selectedList}\r\n        errorText={colors.error}\r\n        multiEnable={true}\r\n        textInputMode=\"flat\"\r\n        searchStyle={{ iconColor: 'red' }}\r\n        searchPlaceholder=\"Procurar\"\r\n        modalCloseButtonText=\"fechar\"\r\n        modalDoneButtonText=\"terminado\"\r\n      />\r\n      <PaperButton\r\n        style={styles.button}\r\n        labelStyle={styles.text}\r\n        mode={'outlined'}\r\n        onPress={() => {\r\n          const genderError = selectValidator(gender.value);\r\n          const colorError = selectValidator(colors.value);\r\n          if (genderError || colorError) {\r\n            setColors({ ...colors, error: colorError });\r\n            setGender({ ...gender, error: genderError });\r\n            return;\r\n          }\r\n          Alert.alert(\r\n            'Selected Values',\r\n            'Gender: ' + gender.value + ' and Colors: ' + colors.value\r\n          );\r\n        }}\r\n      >\r\n        Submit\r\n      </PaperButton>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    paddingHorizontal: 12,\r\n  },\r\n  box: {\r\n    width: 60,\r\n    height: 60,\r\n    marginVertical: 20,\r\n  },\r\n\r\n  button: {\r\n    marginVertical: 10,\r\n    width: '100%',\r\n    backgroundColor: 'blue',\r\n  },\r\n  text: {\r\n    fontWeight: 'bold',\r\n    fontSize: 15,\r\n    lineHeight: 26,\r\n    color: 'white',\r\n  },\r\n});\r\n```\r\n\r\nYou can check the example source code in [example module](https://github.com/srivastavaanurag79/react-native-paper-select/tree/master/example).\r\n\r\n## Try it out\r\n\r\nYou can run the example module by performing these steps:\r\n\r\n```\r\ngit clone https://github.com/srivastavaanurag79/react-native-paper-select.git\r\ncd react-native-paper-select && cd example\r\nnpm install\r\ncd ios && pod install && cd ..\r\nreact-native run-ios\r\nreact-native run-android\r\n```\r\n\r\n## Authors\r\n\r\n- Anurag Srivastava [(@srivastavaanurag79)](https://github.com/srivastavaanurag79)\r\n- Harshit Singhal [(@Harshit31)](https://github.com/Harshit31)\r\n\r\n## Contributing\r\n\r\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}