@jaybee4real/react-native-wheel-timepicker

react-native-wheel-time-picker

This was made because the normal behaviour for a time on android and ios is somewhat differ for android and ios Simple and pure js time picker for react-native. It provides the same UI for Android and IOS. You can use the Wheel component independently.

Example 1

Example 2

Android	IOS

Installation

npm install react-native-wheel-time-picker

Props

TimePicker Props

	necessary	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
use24HourSystem		boolean	undefined	show the time in 24-hour system format
showSeconds		boolean	undefined	show seconds value
wheelProps		StyleProps type of Wheel	undefined	see next

Wheel StyleProps

	necessary	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.

 x - x^3 / 3! + x^5 / 5! - x^7 / 7!

The x value range is [-PI , PI] so it's maximum error will be

PI^9 / 9! = 0.08214 .....

If the x range is [-PI/2, PI/2] than the maximum error will be about 0.00016 ....

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT