datepicker android refactor

package.json

@@ -74,6 +74,7 @@
     "react-native-svg": "15.2.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-view-shot": "^3.7.0",
+    "react-native-wheel-pick": "^1.2.2",
     "react-native-walkthrough-tooltip": "^1.6.0",
     "uuid": "^10.0.0",
     "yup": "^1.3.3",

src/components/Calendar/InputDatePicker/index.tsx

@@ -40,6 +40,7 @@ export const InputDatePicker: FC<Props> = ({
         header={'Date of birth'}
         value={new Date(spinnerSelectedDate).toLocaleDateString()}
         isFocused={(b) => setVisible(b)}
+        onBlur={() => {}}
         inputMode={'none'}
         placeholder={'Choose a birth date'}
         formikError={formikError}

src/components/Calendar/SpinnerDatePicker.tsx

@@ -1,6 +1,8 @@
 import React, { FC, useState } from 'react';
 import { Colors } from '../../theme';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
+import { DatePicker } from 'react-native-wheel-pick';
+import { Platform } from 'react-native';
 
 type Props = {
   selectedDate: (date: Date) => void;
@@ -16,7 +18,14 @@ const SpinnerDatePicker: FC<Props> = ({ selectedDate }) => {
     }
   };
 
-  return (
+  const onChangeAndroid = (selectedSpinnerDate?: Date) => {
+    selectedDate(selectedSpinnerDate!);
+    setValue(selectedSpinnerDate!);
+  };
+
+  if (!value) return
+
+  return Platform.OS === 'ios' ? (
     <DateTimePicker
       value={value}
       textColor={Colors.DARK_BLUE}
@@ -26,6 +35,21 @@ const SpinnerDatePicker: FC<Props> = ({ selectedDate }) => {
       minimumDate={new Date(1930, 0, 1)}
       maximumDate={new Date()}
     />
+  ) : (
+    <DatePicker
+      date={value}
+      style={{
+        backgroundColor: 'white',
+        width: undefined,
+        marginVertical: 16,
+        height: 215
+      }}
+      onDateChange={onChangeAndroid}
+      minimumDate={new Date(1930, 0, 1)}
+      maximumDate={new Date()}
+      textColor={Colors.DARK_BLUE}
+      textSize={21}
+    />
   );
 };