{"id":24598247,"url":"https://github.com/reactseals/react-native-scrollable-picker","last_synced_at":"2025-07-03T08:04:54.955Z","repository":{"id":37880023,"uuid":"211093366","full_name":"reactseals/react-native-scrollable-picker","owner":"reactseals","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-10T03:46:03.000Z","size":895,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-24T12:15:22.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactseals.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T13:16:20.000Z","updated_at":"2023-07-07T09:01:34.000Z","dependencies_parsed_at":"2023-01-25T20:32:50.878Z","dependency_job_id":null,"html_url":"https://github.com/reactseals/react-native-scrollable-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactseals","download_url":"https://codeload.github.com/reactseals/react-native-scrollable-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244163758,"owners_count":20408798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-24T12:15:27.118Z","updated_at":"2025-03-18T05:29:18.537Z","avatar_url":"https://github.com/reactseals.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-scrollable-picker\nA pure JS scrollable picker solution for react-native, highly customizable.\n\n-Auto height detection\n\n![example](./res/demo.gif)\n\n\n## Usage\n\n```jsx\nimport React, {Component} from 'react';\nimport ScrollPicker from 'react-native-scrollable-picker';\n\nexport default class SimpleExample extends Component {\n\n\n    handleClick = (index, options, onValueChange) =\u003e {\n        this.sp.scrollToIndex(index);   // select 'c'\n        onValueChange(options[index]);\n    }\n\n    render() {\n        return(\n            \u003cScrollPicker\n                ref={(sp) =\u003e {this.sp = sp}}\n                dataSource={options}\n                selectedIndex={0}\n                itemHeight={ITEM_HEIGHT}\n                wrapperHeight={500}\n                wrapperStyle={{\n                    backgroundColor: 'transparent'\n                }}\n                renderItem={(data, index, isSelected) =\u003e {\n                    return(\n                        \u003cTouchableOpacity \n                        onPress={() =\u003e this.handleClick(index, options, onValueChange)} \n                        style={{height: ITEM_HEIGHT}}\u003e\n                            \u003cText style={isSelected ? {\n                                    color: '#fff',\n                                    textAlign: 'center',\n                                    fontSize: 34,\n                                    height: 50,\n                                    fontWeight: 'bold'\n                                } : {\n                                    color: '#fff',\n                                    textAlign: 'center',\n                                    fontSize: 20,\n                                    height: 50,\n                                    fontWeight: '300'\n                                }}\n                            \u003e\n                                {data}\n                            \u003c/Text\u003e\n                        \u003c/TouchableOpacity\u003e\n                    )\n                }}\n                onValueChange={(data, selectedIndex) =\u003e {\n                    onValueChange(options[selectedIndex]);\n                }}\n            /\u003e\n    );\n    }\n}\n\n```\n\n## Props\n\n| Prop                 | Required | Default      | Params type             | Description                         |\n| -------------------- | -------- | ------------ | ----------------------- | ----------------------------------- |\n| dataSource           | yes      |              | Array                   | Picker data                         |\n| wrapperHeight        | yes      |              | Number                  | Picker window height                |\n| renderItem           | no       |              | Function                | Renders picker options              |\n| selectedIndex        | no       | 0            | Number                  | Default selected value              |\n| onValueChange        | no       | () =\u003e {}     | Function                | Called on valie change              |\n| highlightStyle       | no       |              | Style array             | Called when epg boundaries are left |\n| wrapperStyle         | no       |              | Style array             | Called when epg boundaries are left |\n| itemHeight           | no       | 30           | Number                  | Picker's single item height         |\n| fixedHeight          | no       | false        | Bool                    | Disable dynamic height calculation  |\n| rotationEnabled      | no       | true         | Bool                    | Auto rotation support which is calling `handleWrapperHeightChange` method  |\n\n## Default styles\n\n```jsx\n        wrapperStyle = {\n            height: this.wrapperHeight,\n            flex: 1,\n            overflow: 'hidden',\n        },\n        highlightStyle = {\n            position: 'absolute',\n            top: (this.wrapperHeight - this.itemHeight) / 2,\n            height: this.itemHeight,\n            width: highlightWidth,\n        },\n        itemWrapper: {\n            height: 30,\n            justifyContent: 'center',\n            alignItems: 'center',\n        },\n        itemText: {\n            color: '#999',\n        },\n        itemTextSelected: {\n            color: '#333',\n        },\n```\n\n\n## Contributors ✨\n\nThanks goes to these wonderful people :shipit:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kasinskas\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/22332217?v=4\" width=\"64px;\" alt=\"Rokas Kašinskas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRokas Kašinskas\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lukebars\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/46403446?v=4\" width=\"64px;\" alt=\"Lukas Baranauskas\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLukas Baranauskas\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/veizz\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1176926?v=4\" width=\"64px;\" alt=\"veizz\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eveizz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/rafanascmag/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/10750521?v=4\" width=\"64px;\" alt=\"Rafael Magalhães\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRafael Magalhães\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-scrollable-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactseals%2Freact-native-scrollable-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-scrollable-picker/lists"}