{"_id":"@0xaf4/react-native-dropdown-custom","name":"@0xaf4/react-native-dropdown-custom","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@0xaf4/react-native-dropdown-custom","version":"1.0.2","description":"A single pure component for drop-down/combobox in react native","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/febfeb/react-native-dropdown.git"},"keywords":["react","native","dropdown","react-native-dropdown"],"author":{"name":"Febrianto Arif Rakhman","url":"Fork"},"license":"GPL-3.0-or-later","bugs":{"url":"https://github.com/febfeb/react-native-dropdown/issues"},"homepage":"https://github.com/febfeb/react-native-dropdown#readme","peerDependencies":{"react":"*","react-native":"*","react-native-vector-icons":"*"},"dependencies":{"lodash":"^4.17.21"},"devDependencies":{"metro-react-native-babel-preset":"^0.69.0"},"_id":"@0xaf4/react-native-dropdown-custom@1.0.2","gitHead":"2288a2c517bc49ee8df40a324afd95c611cdb6e7","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-4fWZSVZvLWcFSJASjQUZPT+Eyl+yIwdUeSfDR2CIjjOj6964sxK8GMoc/Q1A6LnsVjZ6Zibbb7h+4x0KF5/3sg==","shasum":"add57aea0c5c6cbd2c654da630d29f7da28df43c","tarball":"https://registry.npmjs.org/@0xaf4/react-native-dropdown-custom/-/react-native-dropdown-custom-1.0.2.tgz","fileCount":8,"unpackedSize":555469,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC3oShB9Dx96kbd3yG/mtK19Bv4Tbw32CNQdNUZduIO8wIhAIx0o8TAFKImUpLes2/aOMHudG01U+jiazGGQLNrcoyf"}]},"_npmUser":{"name":"0xaf4","email":"karim.badalov1612@gmail.com"},"directories":{},"maintainers":[{"name":"0xaf4","email":"karim.badalov1612@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-dropdown-custom_1.0.2_1744130742176_0.7673261305059298"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-08T16:45:42.075Z","1.0.2":"2025-04-08T16:45:42.396Z","modified":"2025-04-08T16:45:42.650Z"},"maintainers":[{"name":"0xaf4","email":"karim.badalov1612@gmail.com"}],"description":"A single pure component for drop-down/combobox in react native","homepage":"https://github.com/febfeb/react-native-dropdown#readme","keywords":["react","native","dropdown","react-native-dropdown"],"repository":{"type":"git","url":"git+https://github.com/febfeb/react-native-dropdown.git"},"author":{"name":"Febrianto Arif Rakhman","url":"Fork"},"bugs":{"url":"https://github.com/febfeb/react-native-dropdown/issues"},"license":"GPL-3.0-or-later","readme":"# @febfeb/react-native-dropdown\r\nA single pure component for drop-down/combobox in react native\r\n\r\n![react-native-dropdown](https://raw.githubusercontent.com/febfeb/react-native-dropdown/main/image.gif)\r\n\r\n## Requirement\r\n\r\nPlease install [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\r\n\r\n## Instalation\r\n\r\n```\r\nyarn add @febfeb/react-native-dropdown\r\n```\r\n\r\n## Usage (Simple)\r\n\r\n```\r\nimport Dropdown from '@febfeb/react-native-dropdown';\r\n\r\nlet fruits = [\r\n    { id: 1, label: 'Apple'},\r\n    { id: 2, label: 'Orange'},\r\n    { id: 3, label: 'Pineapple'},\r\n];\r\n\r\nconst [fruit, setFruit] = useState(1);\r\n\r\nreturn (\r\n    <Dropdown\r\n        label='Select fruit'\r\n        value={fruit}\r\n        data={fruits}\r\n        onChange={(val) => {\r\n            setFruit(val);\r\n        }}/>\r\n);\r\n\r\n```\r\n\r\n## Usage (Dark Theme)\r\n\r\n```\r\nimport Dropdown from '@febfeb/react-native-dropdown';\r\n\r\nlet fruits = [\r\n    { id: 1, label: 'Apple'},\r\n    { id: 2, label: 'Orange'},\r\n    { id: 3, label: 'Pineapple'},\r\n];\r\n\r\nconst [fruit, setFruit] = useState(1);\r\n\r\nconst theme = {\r\n    boxStyle: {\r\n        borderColor: 'blue',\r\n    },\r\n};\r\n\r\nreturn (\r\n    <Dropdown\r\n        label=\"Select fruit\"\r\n        theme={{\r\n            containerStyle: {\r\n                backgroundColor: '#000',\r\n            },\r\n            boxStyle: {\r\n                backgroundColor: '#000',\r\n                borderColor: '#fff',\r\n            },\r\n            labelStyle: {\r\n                color: '#fff',\r\n            },\r\n            textContentStyle: {\r\n                color: '#fff',\r\n            },\r\n            rightIconStyle: {\r\n                color: '#fff',\r\n            },\r\n            modalRootStyle: {\r\n                backgroundColor: 'rgba(255,255,255,0.5)',\r\n            },\r\n            modalContentStyle: {\r\n                backgroundColor: '#000',\r\n            },\r\n            searchWrapperStyle: {\r\n                backgroundColor: '#222',\r\n            },\r\n            searchIconStyle: {\r\n                color: '#fff',\r\n            },\r\n            searchInputStyle: {\r\n                color: '#fff',\r\n            },\r\n            listStyle: {\r\n                backgroundColor: '#000',\r\n            },\r\n            listTextStyle: {\r\n                color: \"#fff\",\r\n            },\r\n        }}\r\n        placeholderTextColor={'rgba(255,255,255,0.8)'}\r\n        value={fruit}\r\n        data={fruits}\r\n        onChange={(val) => {\r\n            setFruit(val);\r\n        }}\r\n    />\r\n);\r\n\r\n```\r\n\r\n## Props\r\n\r\nProp | Type | Description\r\n--- | --- | ---\r\nvalue | string/number | This is mandatory for selecting the default value\r\ndata | array of object with `id` and `label` attribute | Used as array of source data\r\nlabel | string | Title\r\nonChange | function | This event will be triggered after user click the list item\r\nrenderDisplay | function | Use this function to custom render your dropdown\r\nshowSearchBar | boolean | Use this to show search bar (default false)\r\ntheme | `Object` | This is if you want to customize the appearance\r\nplaceholderTextColor | string color | This is if you want to customize the placeholderTextColor props in TextInput\r\n","readmeFilename":"README.md","_rev":"1-d0a794a0e0c44ec6a5aee7d73d5da4ee"}