React-native-wheel-time-picker NPM

react-native-wheel-time-picker

Simple and pure js time picker for react-native. It provides the same UI for Android and IOS. You can use the Wheel component independantly.

Android	IOS

Installation

npm install react-native-wheel-time-picker

Props

TimePicker Props

	types	default	info
label	string	undefined
value	number	undefined	millisecond value after 0 0
onChange	(newValue: number) => void	undefined	changing value function
containerStyle	ViewStyle	undefined	container style
onScroll	(scrollState: boolean) => void	undefined	a callback function. it may be used when the TimePicker is inside of a scroll view to preventing the outer scroll.
textStyle	TextStyle	undefined	text style
timeFormat	( TimeType	string )[]	'ampm', 'hours12', ':', 'min'
wheelProps	StyleProps type of Wheel	undefined	see next

Wheel StyleProps

	types	default	info
wheelHeight	number	70	Wheel height
displayCount	number	5	Number of items to show in front of the wheel.
containerStyle	ViewStyle	undefined	Wheel container style
itemHeight	number	15	Wheel item height
selectedColor	string	'black'	Selected item color
disabledColor	string	'gray'	Other items color
textStyle	TextStyle	undefined	Text style of each item

Other Wheel Props

Below props are provided by the TimePicker component.

	necessary	types	default	info
value	v	string		item value
setValue	v	(newValue: string) => void		Changing value function
values	v	string[]		List of values to choose from
onScroll		(scrollState: boolean) => void	undefined	a callback function. it may be used when the TimePicker is inside of a scroll view to preventing the outer scroll.

Usage

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

import TimePicker from 'react-native-wheel-time-picker';
import { useMemo } from 'react';

const MILLISECONDS_PER_MINUTE = 60 * 1000;
const MILLISECONDS_PER_HOUR = 60 * 60 * 1000;
const MILLISECONDS_PER_DAY = 24 * MILLISECONDS_PER_HOUR;

export default function App() {
  const [timeValue, setTimeValue] = useState(Date.now() % MILLISECONDS_PER_DAY);
  const [hour, min] = useMemo(() => {
    return [
      Math.floor(timeValue / MILLISECONDS_PER_HOUR),
      Math.floor((timeValue % MILLISECONDS_PER_HOUR) / MILLISECONDS_PER_MINUTE),
      Math.floor((timeValue % MILLISECONDS_PER_MINUTE) / 1000),
    ];
  }, [timeValue]);
  return (
    <View style={styles.container}>
      <TimePicker
        value={timeValue}
        wheelProps={{
          wheelHeight: 70,
          itemHeight: 15,
        }}
        onChange={(newValue) => setTimeValue(newValue)}
      />
      <Text style={styles.timeValue}>{`${hour < 10 ? '0' : ''}${hour}:${
        min < 10 ? '0' : ''
      }${min}`}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  timeValue: {
    marginVertical: 20,
  },
});

Animated sine function

The sin function of the AnimatedMath.ts file is really inspired by 'react-native-animated-math' package. We tried to import the package and use it, but there was a performance issue, so we created a new function that omitted some terms. The function uses the Taylor series approximation as below.