React Native TimePicker For iOS

React native custom timepicker (24 hours format) for iOS

Screenshots

Installation

$ npm i react-native-timepicker --save

Basic Usage

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 (
      <View style={styles.container}>
        <TimePicker
        style={styles.picker}
        selectedHour={0}
        selectedMinute={30}
        minuteInterval={5}
        onValueChange={this._onValueChange}
        loop={true} />
      </View>
    );
  }
};

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 |