@jaybee4real/react-native-wheel-timepicker v0.1.0

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

Wheel StyleProps

Other Wheel Props

Below props are provided by the TimePicker component.

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