Skip to content

SUVO-DEV/react-native-simple-time-picker-1

 
 

Repository files navigation

Shows 24 hour time from 00:00 - 23:59

Install

npm i react-native-time-picker-simple

Usage

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import TimePicker from 'react-native-simple-time-picker';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default class App extends Component {
  state = {
    selectedHours: 0,
    selectedMinutes: 0,
  }

  render() {
    const { selectedHours, selectedMinutes } = this.state;
    return (
      <View style={styles.container}>
        <Text>{selectedHours}:{selectedMinutes}</Text>
        <TimePicker
          selectedHours={selectedHours}
          selectedMinutes={selectedMinutes}
          onChange={(hours, minutes) => this.setState({ selectedHours: hours, selectedMinutes: minutes })}
        />
      </View>
    );
  }
}

API

Property Type Default Description
selectedHours Number 0
selectedMinutes Number 0
onChange Function null Callback function for when values are changed function(hours: number, minutes: number) => void
hoursUnit String '' Hours Unit for label
minutesUnit String '' Minutes Unit for label