# react-native-modal-time-picker

> modal wheel time picker

Latest version **0.0.2** (published 2023-10-13) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install react-native-modal-time-picker
pnpm add react-native-modal-time-picker
yarn add react-native-modal-time-picker
bun add react-native-modal-time-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2023-10-13 |
| First published | 2023-10-13 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Muhammad Jahanzaib |
| Maintainers | jahanzaib5244 |
| Keywords | react-native-time-picker, ios-time-picker, android-time-picker, react-native-model-time-picker, time-picker-react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-modal-time-picker
- Repository: https://github.com/jahanzaib5244/react-native-modal-time-picker
- Homepage: https://github.com/jahanzaib5244/react-native-modal-time-picker#readme
- Issues: https://github.com/jahanzaib5244/react-native-modal-time-picker/issues
- npm.io page: https://npm.io/package/react-native-modal-time-picker

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2023-10-13
- 0.0.1 — 2023-10-13

## README

# react-native-modal-time-picker

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

<p align="center"><img src="https://firebasestorage.googleapis.com/v0/b/musafir-49f4d.appspot.com/o/timepicker.png?alt=media&token=6922733e-1db5-4601-ac6d-ff749cf281e3&_gl=1*18rp4s8*_ga*MTcxMDI1NjE4My4xNjk3MTA2NTYz*_ga_CW55HF8NVT*MTY5NzE3ODUwNy40LjEuMTY5NzE3ODUzNi4zMS4wLjA." alt="Showcase iOS" width="200" height="433">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

##

> **Note**: Make sure you have install [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated), [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler),[@react-native-masked-view/masked-view](https://www.npmjs.com/package/@react-native-masked-view/masked-view) instructions till step, before proceeding.

## Installation

using yarn:

```sh
yarn add react-native-modal-time-picker
```

using npm:

```sh
npm install --save react-native-modal-time-picker
```

## Usage

```javascript
import React, {useState} from 'react';
import TimePicker from 'react-native-modal-time-picker';

function App() {
  const [visible, setVisible] = useState(false);

  const openTimePicker = () => {
    setVisible(true);
  };

  const closeTimePicker = () => {
    setVisible(false);
  };

  return (
    <TimePicker
      visible={visible}
      handelChange={e => console.log(e)}
      onPressCancel={closeTimePicker}
      onPressConfirm={closeTimePicker}
      confirmButtonText={'Confirm'}
      cancelButtonText={'Cancel'}
    />
  );
}
```

### Props

#### Basic

| Prop              |    Type     |                    Description                     | Default  |
| :---------------- | :---------: | :------------------------------------------------: | :------- |
| handelChange      |    `fn`     |             function return an object              | `fn`     |
| visible           |   `bool`    |              Show / Hide date picker               | `false`  |
| onPressCancel     |    `fn`     | function trigger when user click on cancel button  | `-`      |
| onPressConfirm    |    `fn`     | function trigger when user click on confirm button | `-`      |
| style             |  `object`   |                  see style props                   | `{}`     |
| header            | `ReactNode` |                   custom header                    | -        |
| confirmButtonText |  `string`   |                confirm button text                 | `Ok`     |
| cancelButtonText  |  `string`   |                 cancel button text                 | `Cancel` |

#### Styling

| Prop              |          Type          |          Description          | Default |
| :---------------- | :--------------------: | :---------------------------: | :------ |
| buttonsContainer  | `StyleProp<ViewStyle>` | footer button container style | -       |
| cancelButton      | `StyleProp<ViewStyle>` |  footer cancel button style   | -       |
| confirmButton     | `StyleProp<ViewStyle>` |  footer confirm button style  | -       |
| footerButton      | `StyleProp<ViewStyle>` |     footer buttons style      | -       |
| footerButtonsText | `StyleProp<TextStyle>` |   footer button text style    | -       |
| cancelButtonText  | `StyleProp<TextStyle>` |   cancel button text style    | -       |
| confirmButtonText | `StyleProp<TextStyle>` |   confirm button text style   | -       |
| timeText          | `StyleProp<TextStyle>` |    picker time text style     | -       |
| timeTextContainer | `StyleProp<ViewStyle>` |  picker time container style  | -       |

## Authors

- [Muhammad Jahanzaib](https://github.com/jahanzaib5244/) - Initial code - [@jahanzaib5244](https://twitter.com/jahanzaib5244)

See also the list of [contributors](https://github.com/jahanzaib5244/react-native-modal-time-picker/contributors) who participated in this project.

## Contributing

We welcome contributions to react-native-modal-time-picker.

If you have an idea for a new feature or have discovered a bug, please open an issue.

Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.

Screenshots and Gifs are VERY helpful to add to the PR for reviews.

Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

## Questions

Feel free to [Contact me](mailto:jahanzaib5244@gmail.com) or [Create an issue](https://github.com/jahanzaib5244/react-native-modal-time-picker/issues/new)

---
_Source: https://npm.io/package/react-native-modal-time-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._