{"id":18478179,"url":"https://github.com/tighten/react-native-time-input","last_synced_at":"2025-04-08T15:32:08.819Z","repository":{"id":43096856,"uuid":"341265642","full_name":"tighten/react-native-time-input","owner":"tighten","description":"A simple time input component with autoformatting.","archived":false,"fork":false,"pushed_at":"2022-03-18T13:56:08.000Z","size":1342,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-02T23:35:31.690Z","etag":null,"topics":["expo","react","react-native","react-native-component","typescript"],"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/tighten.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":"2021-02-22T16:33:59.000Z","updated_at":"2023-10-15T18:05:23.000Z","dependencies_parsed_at":"2022-07-25T04:46:13.649Z","dependency_job_id":null,"html_url":"https://github.com/tighten/react-native-time-input","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tighten%2Freact-native-time-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tighten%2Freact-native-time-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tighten%2Freact-native-time-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tighten%2Freact-native-time-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tighten","download_url":"https://codeload.github.com/tighten/react-native-time-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247871337,"owners_count":21010022,"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":["expo","react","react-native","react-native-component","typescript"],"created_at":"2024-11-06T12:09:09.919Z","updated_at":"2025-04-08T15:32:03.810Z","avatar_url":"https://github.com/tighten.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Time Input 🕓\n\n[![Lint, Build, and Test](https://github.com/tighten/react-native-time-input/workflows/Build%20and%20Test/badge.svg?branch=main)](https://github.com/tighten/react-native-time-input/actions?query=workflow%3A%22Build+and+Test%22)\n\nThis package works on both **Android** and **iOS**\n\n## Preview\n\n![React Native Time Input Preview](https://github.com/tighten/react-native-time-input/blob/HEAD/preview.gif?raw=true)\n\n## Try it out\n\nYou can run the example module by performing these steps:\n\n```\n$ git clone git@github.com:tighten/react-native-time-input.git\n$ yarn\n$ yarn example start\n```\n\n## Installation\n\nYou can install this package by running one of the following  commands:\n\n**NPM**\n\n`npm i @tighten/react-native-time-input`\n\n**Yarn**\n\n`yarn add @tighten/react-native-time-input`\n\n### Usage\n\n```js\nimport React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport TimeInput from '@tighten/react-native-time-input';\n\nconst MyApp = () =\u003e {\n  const [time, setTime] = useState('');\n\n  const handleTimeChange = (time, validTime) =\u003e {\n    if (!validTime) return;\n\n    setTime(time);\n  }\n\n  return (\n    \u003cView\u003e\n      \u003cTimeInput \n        setCurrentTime \n        onTimeChange={handleTimeChange} \n      /\u003e\n\n      \u003cText\u003eCurrent time entered is: {time}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n## Props\n\n| Prop         | Default     | Type        | Description |\n| ------------ | ----------- | ----------- | ----------- |\n| `theme` |  | `TimeInputTheme` | See the [customization](#customization) section below for configuration instructions |\n| `styles` |  | `TimeInputStyle` | See the [customization](#customization) section below for configuration instructions |\n| `errorText` | \"Please enter a valid time.\" | string | The message that is displayed when the user enters an invalid time.  |\n| `initialTime` | `null` | Date | Optionally set the initial time for the input on first render. |\n| `setCurrentTime` | `false` | boolean | Decide if the input should load with the user's current time set as it's value. This prop is ignored when an `initialTime` is passed in. |\n| `onTimeChange` | `(localeTime, isValid) =\u003e {}` | function | A callback function that runs when the value of the time input or meridiem is changed. Receives a locale time string (`hh:mm a`) and a boolean value specifying if the time is valid. |\n\n## Customization\n\nThe look and feel of this component is completely customizable.\n\n### Theme\n\nYou can implement minimal changes to the look and feel by adjusting the default theme's color values for elements inside the component. Hex color codes and named color text strings (e.g., blue) are valid values. \nHere's what's available:\n\n| Prop        | Default    |\n| ----------- | ----------- |\n| `errorTextColor`| `#c0392b` |\n| `inputBackgroundColor`   | `#ffffff` |\n| `inputBorderColor`   | `#a6a6a6` |\n| `inputTextColor`   | `#2e2e2e` |\n| `toggleBackgroundColor` | `#e6e6e6` |\n| `toggleButtonActiveBackgroundColor` | `#a6a6a6` |\n| `toggleButtonActiveTextColor` | `#ffffff` |\n| `toggleButtonBackgroundColor` | `#e6e6e6` |\n| `toggleButtonTextColor` | `#2e2e2e` |\n\n**Example**\n\n```js\nimport React from 'react';\nimport TimeInput from '@tighten/react-native-time-input';\n\nexport const MyApp = () =\u003e {\n  return (\n    \u003cTimeInput \n      theme={{\n        inputBackgroundColor: '#000000',\n        inputTextColor: '#ffff00',\n      }} \n    /\u003e\n  )\n};\n```\n\n### Styles\n\n\u003e Note: Theme overrides take precedent over all other styles.\n\nIf you want to make adjustments to the component's layout, you can pass in a style object to override the default styles.\n\n| Prop        | Description |\n| ----------- | ----------- |\n| `componentContainer`| A wrapper `View` element that surrounds all elements in the component |\n| `container`   | A wrapper `View` element that surrounds the text input and meridiem toggle |\n| `input`   | The `TextInput` field |\n| `toggle`   | A wrapper `View` element that surrounds the meridiem toggle and buttons |\n| `toggleButton` | The `TouchableOpacity` (iOS) or `TouchableNativeFeedback` (Android) element for AM and PM |\n| `toggleButtonActive` | An `Animated.View` element |\n| `errorText` | The `Text` field displayed below the input when there are errors |\n\n**Example**\n\n```js\nimport React from 'react';\nimport TimeInput from '@tighten/react-native-time-input';\n\nexport const MyApp = () =\u003e {\n  return (\n    \u003cTimeInput \n      styles={{\n        componentContainer: {\n          borderStyle: 'solid',\n          borderWidth: 2,\n          paddingHorizontal: 20,\n        },\n      }} \n    /\u003e\n  )\n};\n```\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftighten%2Freact-native-time-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftighten%2Freact-native-time-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftighten%2Freact-native-time-input/lists"}