feat: fix width of date picker input

Author: RichardLindhout

example/src/ReadMeExampleDatePickerInput.tsx

@@ -13,8 +13,6 @@ export default function ReadMeExampleDatePickerInput() {
         value={inputDate}
         onChange={(d) => setInputDate(d)}
         inputMode="start"
-        // FIXME : remove the ts error
-        // @ts-ignore
         autoCompleteType="birthdate-full"
         // mode="outlined" (see react-native-paper docs)
         // other react native TextInput props

src/Date/DatePickerInput.tsx

@@ -20,15 +20,18 @@ function DatePickerInput(
     withModal = true,
     withDateFormatInLabel = true,
     ...rest
-  }: Omit<React.ComponentProps<typeof TextInput>, 'value' | 'onChange'> & {
+  }: {
     inputMode: 'start' | 'end'
     locale: string
     onChange: (date: Date | undefined) => void
     value: Date | undefined
     validRange?: ValidRangeType | undefined
     withModal?: boolean
     withDateFormatInLabel?: boolean
-  },
+  } & Omit<
+    React.ComponentProps<typeof TextInput>,
+    'value' | 'onChange' | 'onChangeText'
+  >,
   ref: any
 ) {
   const theme = useTheme()
@@ -122,7 +125,6 @@ const styles = StyleSheet.create({
     position: 'relative',
     alignItems: 'center',
     flexGrow: 1,
-    alignSelf: 'flex-start',
   },
   input: {
     flexGrow: 1,

src/Date/DatePickerModalContentHeader.tsx

@@ -58,8 +58,9 @@ export default function DatePickerModalContentHeader(
   return (
     <View style={[styles.header]}>
       <View>
-        <Text style={[styles.label, { color }]}>{uppercase ? label.toUpperCase() : label}</Text>
-
+        <Text style={[styles.label, { color }]}>
+          {uppercase ? label.toUpperCase() : label}
+        </Text>
         <View style={styles.headerContentContainer}>
           {mode === 'range' ? (
             <HeaderContentRange {...props} color={color} />

src/Time/TimePickerModal.tsx

@@ -162,7 +162,9 @@ export function TimePickerModal({
                   tvParallaxProperties={undefined}
                 />
                 <View style={styles.fill} />
-                <Button onPress={onDismiss} uppercase={uppercase}>{cancelLabel}</Button>
+                <Button onPress={onDismiss} uppercase={uppercase}>
+                  {cancelLabel}
+                </Button>
                 <Button
                   onPress={() =>
                     onConfirm({ hours: localHours, minutes: localMinutes })