Update IOs part

README.md

@@ -119,6 +119,7 @@ module.exports = MyPicker;
 | disabled | undefind | `bool` | Disable picker selection  |
 
 # Time Picker
+For IOs DatePickerIOS is used
 
 ![](./src/assets/timePickerAndroid.gif)
 ![](./src/assets/timePickerIos.gif)
@@ -134,12 +135,13 @@ onTimeSelected = date => {}
 
 | Prop                 |     Default      |      Type       | Description                 |
 | :------------------- | :--------------: | :-------------: | :-------------------------- |
-| ...WheelPicker props |        -         |        -        | All style WheelPicker props |
+| [DatePickerIOS props](https://facebook.github.io/react-native/docs/datepickerios#props) |        -         |        -        | All DatePickerIOS props (IOS only) |
+| ...WheelPicker props |        -         |        -        | All style WheelPicker props (Android only) |
 | initDate             |   current date   |     `Date`      | Initial date                |
 | onTimeSelected       |        -         |     `func`      | Callback with selected time |
-| hours                |   [1,2,3,4...]   | `Array<string>` | Custom hours array          |
-| minutes              | [00,05,10,15...] | `Array<string>` | Custom minutes array        |
-| format24             |      false       |    `boolean`    | Time format                 |
+| hours                |   [1,2,3,4...]   | `Array<string>` | Custom hours array (Android only)         |
+| minutes              | [00,05,10,15...] | `Array<string>` | Custom minutes array (Android only)       |
+| format24             |      false       |    `boolean`    | Time format (Android only)                |
 
 # Date Picker
 

src/DatePicker.ios.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { DatePickerIOS, View } from "react-native";
+
+interface Props {
+  initDate: Date;
+  onDateSelected?: Function;
+  disabled?: boolean;
+}
+
+const DatePicker: React.FC<Props> = props => {
+  const { initDate, onDateSelected, disabled } = props;
+  const [date, setDate] = useState(initDate || new Date())
+  return (
+    <View pointerEvents={disabled ? "none" : "auto"}>
+      <DatePickerIOS
+        date={date}
+        onDateChange={(date) => {
+          if (onDateSelected) onDateSelected(date)
+          setDate(date)
+        }}
+        mode={'date'}
+        {...props}
+      />
+    </View>
+  );
+};
+
+export default DatePicker;

src/TimePicker.js → src/TimePicker.android.js

@@ -1,8 +1,3 @@
-/**
- * @prettier
- * @flow
- * */
-
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import WheelPicker from './WheelPicker'
@@ -71,21 +66,21 @@ export default class TimePicker extends React.Component<Props, State> {
       <View style={[styles.container, { backgroundColor: this.props.backgroundColor }]}>
         <WheelPicker
           isCyclic
-          style={styles.wheelPicker}
+          // style={styles.wheelPicker}
           {...this.props}
           data={hours}
           onItemSelected={this.onHourSelected}
           selectedItem={selectedHourIndex}
-          initPosition={0}
+          initPosition={selectedHourIndex}
         />
         <WheelPicker
-          style={styles.wheelPicker}
+          // style={styles.wheelPicker}
           isCyclic
           {...this.props}
           data={minutes}
           onItemSelected={this.onMinuteSelected}
           selectedItem={selectedMinuteIndex}
-          initPosition={0}
+          initPosition={selectedMinuteIndex}
         />
         {!this.props.format24 && this.renderAm()}
       </View>
@@ -149,13 +144,12 @@ export default class TimePicker extends React.Component<Props, State> {
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
+    // alignItems: 'center',
     flexDirection: 'row',
   },
   wheelPicker: {
     height: 150,
-    width: null,
+    width: 150,
     flex: 1,
   },
-})
-
+})

src/TimePicker.ios.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import DatePicker from './DatePicker.ios'
+
+interface Props {
+  initDate: Date;
+  onTimeSelected?: Function;
+  disabled?: boolean;
+}
+
+const TimePicker: React.FC<Props> = props => {
+  return (
+    <DatePicker mode={'time'} {...props} onDateSelected={props.onTimeSelected}/>
+  );
+};
+
+export default TimePicker;