https://github.com/milasevicius/react-native-timepicker

React native custom timepicker (24 hours format) for iOS
https://github.com/milasevicius/react-native-timepicker

react-native

Last synced: 5 days ago
JSON representation

React native custom timepicker (24 hours format) for iOS

• Host: GitHub
• URL: https://github.com/milasevicius/react-native-timepicker
• Owner: milasevicius
• License: mit
• Archived: true
• Created: 2016-01-30T19:09:20.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-10-21T13:57:13.000Z (about 7 years ago)
• Last Synced: 2024-10-06T14:35:37.437Z (2 months ago)
• Topics: react-native
• Language: Objective-C
• Size: 24.4 KB
• Stars: 25
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-timepicker ★20 - React Native timepicker for iOS (Components / UI)
• awesome-reactnative-ui - react-native-timepicker - c962-11e5-8995-544b82da6f2c.png)| (Others)
• awesome-react-native - react-native-timepicker ★20 - React Native timepicker for iOS (Components / UI)
• awesome-react-native - react-native-timepicker ★20 - React Native timepicker for iOS (Components / UI)
• awesome-reactnative-ui - react-native-timepicker - c962-11e5-8995-544b82da6f2c.png)| (Others)
• awesome-react-native - react-native-timepicker ★20 - React Native timepicker for iOS (Components / UI)
• awesome-react-native-ui - react-native-timepicker ★11 - React Native timepicker for iOS (Components / UI)

README

        
# React Native TimePicker For iOS

React native custom timepicker (24 hours format) for iOS

### Screenshots

![screenshot](https://cloud.githubusercontent.com/assets/1790265/12737599/9714fd66-c962-11e5-8995-544b82da6f2c.png)

### Installation

```bash

$ npm i react-native-timepicker --save

```

### Basic Usage

```jsx

import React, {

  AppRegistry,

  Component,

  View,

  StyleSheet

} from 'react-native';

import TimePicker from 'react-native-timepicker';

export default class App extends Component {

  constructor() {

    super();

  }

  _onValueChange = (hour, minute) => {

    console.log("Selected time:", hour, ':', minute);

  };

  render() {

    return (

      

        

      

    );

  }

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#D9D9D9'

  },

  picker: {

    backgroundColor: '#E5E5E5'

  }

});

AppRegistry.registerComponent('App', () => App);

```

### Properties - Basic

| Prop  | Default  | Type | Description |

| :------------ |:---------------:| :---------------:| :-----|

| selectedHour | 0 | `number` | Set default hour |

| selectedMinute | 0 | `number` | Set default minute |

| minuteInterval | 1 | `number` | Set interval at which minutes can be selected |

| loop | false | `bool` | Set component wrap around property |

| style | {...} | `style` | Set style for timepicker container |

### Properties - Methods

| Prop  | Params  | Type | Description |

| :------------ |:---------------:| :---------------:| :-----|

| onValueChange | `hour`, `minute` | `function` | onValueChange method is called when hours or minutes value was changed |