{"id":14974361,"url":"https://github.com/thebiltheory/react-native-number-please","last_synced_at":"2025-04-09T20:14:36.352Z","repository":{"id":38851326,"uuid":"254308576","full_name":"thebiltheory/react-native-number-please","owner":"thebiltheory","description":"🔢 Generate react-native pickers with range numbers.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:38:11.000Z","size":3903,"stargazers_count":152,"open_issues_count":25,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T20:14:28.262Z","etag":null,"topics":["android","digit","digits","dropdown","expo","ios","number","numbers","picker","react","react-native"],"latest_commit_sha":null,"homepage":"","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/thebiltheory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-09T08:02:09.000Z","updated_at":"2025-01-20T02:59:13.000Z","dependencies_parsed_at":"2023-02-06T12:01:11.964Z","dependency_job_id":null,"html_url":"https://github.com/thebiltheory/react-native-number-please","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebiltheory%2Freact-native-number-please","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebiltheory%2Freact-native-number-please/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebiltheory%2Freact-native-number-please/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebiltheory%2Freact-native-number-please/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thebiltheory","download_url":"https://codeload.github.com/thebiltheory/react-native-number-please/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"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":["android","digit","digits","dropdown","expo","ios","number","numbers","picker","react","react-native"],"created_at":"2024-09-24T13:50:27.319Z","updated_at":"2025-04-09T20:14:36.330Z","avatar_url":"https://github.com/thebiltheory.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Native Number Please 🙏🏽\n\n[![Build](https://circleci.com/gh/thebiltheory/react-native-number-please/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/thebiltheory/react-native-number-please) ![npm](https://img.shields.io/npm/v/react-native-number-please?color=%236820FE) ![npm](https://img.shields.io/npm/dm/react-native-number-please) ![NPM](https://img.shields.io/npm/l/react-native-number-please)\n\nGenerate react-native pickers with range numbers.\n\n## Example\n\n[![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=f3f3f3\u0026logoColor=000)](https://snack.expo.io/@thebiltheory/react-native-number-please)\n\n\u003cimg src=\"https://i.ibb.co/0GkCZnz/ezgif-3-f565f85e890a.gif\" alt=\"ezgif-3-f565f85e890a\" width=\"300px\" border=\"0\"\u003e\n\n### Installing\n\nAdd the package to your project\n\n```bash\nyarn add react-native-number-please\n\nnpm install -S react-native-number-please\n```\n\n## Usage\n\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\n\nimport NumberPlease from 'react-native-number-please';\n\nconst OrderPizza = () =\u003e {\n  const initialValues = [{ id: 'pizza', value: 3 }];\n  const [pizzas, setPizzas] = useState(initialValues);\n  const pizzaNumbers = [{ id: 'pizza', label: '🍕', min: 0, max: 99 }];\n\n  return (\n    \u003cView\u003e\n      \u003cText\u003eI would like\u003c/Text\u003e\n      \u003cNumberPlease\n        pickers={pizzaNumbers}\n        values={pizzas}\n        onChange={(values) =\u003e setPizzas(values)}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n```javascript\nimport React from 'react';\nimport { View, Text } from 'react-native';\n\nimport NumberPlease from 'react-native-number-please';\n\nconst ItsYourBirthday = () =\u003e {\n  const initialBirthday = { day: 16, year: 1970, month: 4 };\n  const [birthday, setBirtday] = React.useState(initialBirthday);\n\n  const { day, month, year } = birthday;\n\n  const date = [\n    { id: 'day', label: '', min: 0, max: 31 },\n    { id: 'month', label: '', min: 0, max: 12 },\n    { id: 'year', label: '', min: 1900, max: new Date().getFullYear() },\n  ];\n\n  const calculateAge = () =\u003e {\n    const ageDifMs = Date.now() - new Date(year, month, day).getTime();\n    const ageDate = new Date(ageDifMs);\n    return Math.abs(ageDate.getUTCFullYear() - 1970);\n  };\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText\u003eWhen is your birthday?\u003c/Text\u003e\n      \u003cNumberPlease\n        pickers={date}\n        values={birthday}\n        onChange={(values) =\u003e setBirtday(values)}\n      /\u003e\n      \u003cText\u003eYou're {calculateAge()} years old\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n## Props\n\n| Prop          | Required | Description                                                 | Default     |\n| ------------- | -------- | ----------------------------------------------------------- | ----------- |\n| `pickers`     | ✅       | Array of objects containing individal picker config         | `undefined` |\n| `values`      | ✅       | Array of objects initial values for each picker in `digits` | `undefined` |\n| `onChange`    | ✅       | Callback for when an item is selected.                      | `undefined` |\n| `pickerStyle` | Optional | Picker wrapper style object.                                | `{}`        |\n| `itemStyle`   | Optional | Picker item style object.                                   | `{}`        |\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebiltheory%2Freact-native-number-please","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebiltheory%2Freact-native-number-please","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebiltheory%2Freact-native-number-please/lists"}