{"id":20706234,"url":"https://github.com/rnheroes/react-native-ruler-picker","last_synced_at":"2025-04-07T17:10:45.279Z","repository":{"id":143186293,"uuid":"614851288","full_name":"rnheroes/react-native-ruler-picker","owner":"rnheroes","description":"⚡ Lightning-fast and customizable Ruler Picker component for React Native","archived":false,"fork":false,"pushed_at":"2024-03-02T21:57:36.000Z","size":1198,"stargazers_count":108,"open_issues_count":6,"forks_count":17,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T13:17:58.259Z","etag":null,"topics":["picker","react","react-native","react-native-picker","react-native-ruler","react-native-ruler-picker","reactnative","ruler"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-ruler-picker","language":"TypeScript","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/rnheroes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-16T13:00:28.000Z","updated_at":"2025-03-26T01:20:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0b3d279-b8aa-499b-8c5c-9005839be75e","html_url":"https://github.com/rnheroes/react-native-ruler-picker","commit_stats":{"total_commits":27,"total_committers":4,"mean_commits":6.75,"dds":"0.14814814814814814","last_synced_commit":"2726d65977b54b8c80699c768ee2f1b2c8e56249"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnheroes%2Freact-native-ruler-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnheroes%2Freact-native-ruler-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnheroes%2Freact-native-ruler-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnheroes%2Freact-native-ruler-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rnheroes","download_url":"https://codeload.github.com/rnheroes/react-native-ruler-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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":["picker","react","react-native","react-native-picker","react-native-ruler","react-native-ruler-picker","reactnative","ruler"],"created_at":"2024-11-17T01:22:03.299Z","updated_at":"2025-04-07T17:10:45.258Z","avatar_url":"https://github.com/rnheroes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-ruler-picker\n\n[![npm](https://img.shields.io/npm/dm/react-native-ruler-picker)](https://www.npmjs.com/package/react-native-ruler-picker) [![HitCount](https://img.shields.io/endpoint?url=https%3A%2F%2Fhits.dwyl.com%2Frnheroes%2Freact-native-ruler-picker.json%3Fcolor%3Dblue\u0026show=unique)](http://hits.dwyl.com/rnheroes/react-native-ruler-picker)\n\n⚡ Lightning-fast and customizable Ruler Picker component for React Native\n\n![Preview](docs/preview.gif)\n\n## Installation\n\n1. Ensure sure you've installed [flash-list](https://github.com/Shopify/flash-list)\n2. `yarn add react-native-ruler-picker` or `npm install react-native-ruler-picker`\n\n## Usage\n\n```js\nimport { RulerPicker } from 'react-native-ruler-picker';\n\n\u003cRulerPicker\n  min={0}\n  max={240}\n  step={1}\n  fractionDigits={0}\n  initialValue={0}\n  onValueChange={(number) =\u003e console.log(number)}\n  onValueChangeEnd={(number) =\u003e console.log(number)}\n  unit=\"cm\"\n/\u003e;\n```\n\n## Props\n\n| Name             | Type                         | Required | Default Value | Description                              |\n| ---------------- | ---------------------------- | -------- | ------------- | ---------------------------------------- |\n| width            | number                       | No       | windowWidth   | Width of the ruler picker                |\n| height           | number                       | No       | 500           | Height of the ruler picker               |\n| min              | number                       | Yes      | -             | Minimum value of the ruler picker        |\n| max              | number                       | Yes      | -             | Maximum value of the ruler picker        |\n| step             | number                       | No       | 1             | Step of the ruler picker                 |\n| initialValue     | number                       | No       | min           | Initial value of the ruler picker        |\n| fractionDigits   | number                       | No       | 1             | Number of digits after the decimal point |\n| unit             | string                       | No       | 'cm'          | Unit of the ruler picker                 |\n| indicatorHeight  | number                       | No       | 80            | Height of the indicator                  |\n| indicatorColor   | string                       | No       | 'black'       | Color of the center line                 |\n| valueTextStyle   | RulerPickerTextProps         | No       | -             | Text style of the value                  |\n| unitTextStyle    | RulerPickerTextProps         | No       | -             | Text style of the unit                   |\n| decelerationRate | 'fast' \\| 'normal' \\| number | No       | 'normal'      | Deceleration rate of the ruler picker    |\n| onValueChange    | (value: string) =\u003e void      | No       | -             | Callback when the value changes          |\n| onValueChangeEnd | (value: string) =\u003e void      | No       | -             | Callback when the value changes end      |\n| gapBetweenSteps  | number                       | No       | 10            | Gap between steps                        |\n| shortStepHeight  | number                       | No       | 20            | Height of the short step                 |\n| longStepHeight   | number                       | No       | 40            | Height of the long step                  |\n| stepWidth        | number                       | No       | 2             | Width of the steps                       |\n| shortStepColor   | string                       | No       | 'lightgray'   | Color of the short steps                 |\n| longStepColor    | string                       | No       | 'darkgray'    | Color of the long steps                  |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnheroes%2Freact-native-ruler-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frnheroes%2Freact-native-ruler-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnheroes%2Freact-native-ruler-picker/lists"}