npm-react-native-time-picker

npm install react-native-simple-time-picker yarn add react-native-simple-time-picker

Usage no npm install needed!

<script type="module">
  import npmReactNativeTimePicker from 'https://cdn.skypack.dev/npm-react-native-time-picker';
</script>

README

Install

npm install react-native-simple-time-picker
yarn add react-native-simple-time-picker

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