Home

Awesome

React Native TimePicker For iOS

React native custom timepicker (24 hours format) for iOS

Screenshots

screenshot

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

PropDefaultTypeDescription
selectedHour0numberSet default hour
selectedMinute0numberSet default minute
minuteInterval1numberSet interval at which minutes can be selected
loopfalseboolSet component wrap around property
style{...}styleSet style for timepicker container

Properties - Methods

PropParamsTypeDescription
onValueChangehour, minutefunctiononValueChange method is called when hours or minutes value was changed