EXAMPLE: Date picker

package.json

@@ -117,6 +117,7 @@
     "@tanstack/react-query": "^5.64.1",
     "axios": "^1.7.9",
     "core-js": "^3.37.1",
+    "dayjs": "^1.11.13",
     "expo": "52.0.27",
     "expo-apple-authentication": "~7.1.3",
     "expo-application": "~6.0.2",
@@ -163,6 +164,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
+    "react-native-ui-datepicker": "2.0.4",
     "react-native-web": "~0.19.6",
     "reactotron-react-native": "^5.1.7",
     "sass": "^1.77.2",

src/components/molecules/Field/Field.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { FieldCheckbox } from './FieldCheckbox'
 import { FieldCheckboxGroup } from './FieldCheckboxGroup'
+import { FieldDatePicker } from './FieldDatePicker'
 import { FieldInput } from './FieldInput'
 import { FieldRadioGroup } from './FieldRadioGroup'
 import { FieldSelect } from './FieldSelect'
@@ -12,6 +13,7 @@ type FieldComposition = React.FC<PropsWithChildren> & {
   Checkbox: typeof FieldCheckbox
   RadioGroup: typeof FieldRadioGroup
   Select: typeof FieldSelect
+  DatePicker: typeof FieldDatePicker
 }
 
 const Field: FieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ Field.CheckboxGroup = FieldCheckboxGroup
 Field.Checkbox = FieldCheckbox
 Field.RadioGroup = FieldRadioGroup
 Field.Select = FieldSelect
+Field.DatePicker = FieldDatePicker
 
 export { Field }
 export * from './types'

src/components/molecules/Field/FieldDatePicker.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useCallback, useImperativeHandle, useRef, useMemo } from 'react'
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+
+import type { FieldDatePickerProps } from './types'
+
+import {
+  FormErrorMessage,
+  FormLabel,
+  Box,
+  DatePicker,
+  DatePickerRef,
+} from '@/design-system/components'
+import { getLayoutProps } from '@/design-system/utils/getLayoutProps'
+
+export const FieldDatePicker = forwardRef<DatePickerRef, FieldDatePickerProps>(
+  (
+    {
+      errorMessage,
+      isInvalid,
+      isRequired,
+      label,
+      labelStyle,
+      onBlur,
+      onFocus,
+      testID,
+      onChangeDate,
+      ...props
+    },
+    ref
+  ) => {
+    const _datePickerRef = useRef<DatePickerRef>(null)
+
+    const { layoutProps, restProps: datePickerProps } = useMemo(
+      () => getLayoutProps(props),
+      [props]
+    )
+
+    const handleFocus = useCallback(() => {
+      _datePickerRef?.current?.focus()
+    }, [onFocus])
+
+    const handleBlur = useCallback(
+      (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        onBlur && e && onBlur(e)
+        _datePickerRef.current?.blur()
+      },
+      [onBlur]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: handleFocus,
+        blur: handleBlur,
+        ..._datePickerRef.current,
+      }),
+      [handleBlur, handleFocus]
+    )
+
+    return (
+      <Box width="100%" gap={1} mb={2} {...layoutProps}>
+        <FormLabel
+          {...{ isRequired, label, labelStyle }}
+          testID={testID + ':label'}
+          onLabelPress={handleFocus}
+        />
+        <DatePicker
+          isInvalid={isInvalid || Boolean(errorMessage)}
+          onChangeDate={onChangeDate}
+          {...datePickerProps}
+          ref={_datePickerRef}
+          testID={testID + ':input'}
+        />
+        <FormErrorMessage {...{ errorMessage }} testId={testID + ':error_message'} />
+      </Box>
+    )
+  }
+)

src/components/molecules/Field/types.ts

@@ -7,6 +7,7 @@ import {
   SelectProps,
   StyledProps,
   TouchableRef,
+  DatePickerProps,
 } from '@/design-system'
 
 // -----------------------
@@ -92,3 +93,12 @@ export type FieldCheckboxProps = FormLabelProps &
   CheckboxProps & {
     errorMessage?: string
   }
+
+// -----------------------
+// ----- DATEPICKER ------
+// -----------------------
+
+export type FieldDatePickerProps = FormLabelProps &
+  DatePickerProps & {
+    errorMessage?: string
+  }

src/components/organisms/ControlledField/ControlledDatePicker.tsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { Controller, ControllerProps, FieldValues, get } from 'react-hook-form'
+
+import type { ControlledDatePickerProps } from './types'
+import { Field } from '../../molecules'
+
+export const ControlledDatePicker = <TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  errors,
+  rules,
+  children,
+  ...props
+}: ControlledDatePickerProps<TFieldValues>) => {
+  const errorMessage = get(errors, name)?.message
+
+  const renderDatePicker = useCallback(
+    ({
+      field: { onChange, name, ref, value, ...fieldProps },
+    }: Parameters<ControllerProps['render']>[0]) => {
+      return (
+        <Field.DatePicker
+          {...props}
+          {...fieldProps}
+          date={value}
+          ref={ref}
+          errorMessage={errorMessage}
+          onChangeDate={onChange}
+        />
+      )
+    },
+    [errorMessage, props]
+  )
+
+  return (
+    <Controller
+      name={name}
+      // @ts-expect-error: For some reason, the type of render is not being inferred correctly
+      control={control}
+      rules={rules}
+      render={renderDatePicker}
+    />
+  )
+}

src/components/organisms/ControlledField/ControlledField.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react'
 
 import { ControlledCheckbox } from './ControlledCheckbox'
 import { ControlledCheckboxGroup } from './ControlledCheckboxGroup'
+import { ControlledDatePicker } from './ControlledDatePicker'
 import { ControlledInput } from './ControlledInput'
 import { ControlledRadioGroup } from './ControlledRadioGroup'
 import { ControlledSelect } from './ControlledSelect'
@@ -12,6 +13,7 @@ type ControlledFieldComposition = React.FC<PropsWithChildren> & {
   RadioGroup: typeof ControlledRadioGroup
   Checkbox: typeof ControlledCheckbox
   Select: typeof ControlledSelect
+  DatePicker: typeof ControlledDatePicker
 }
 
 const ControlledField: ControlledFieldComposition = ({ children }) => {
@@ -23,6 +25,7 @@ ControlledField.CheckboxGroup = ControlledCheckboxGroup
 ControlledField.Checkbox = ControlledCheckbox
 ControlledField.RadioGroup = ControlledRadioGroup
 ControlledField.Select = ControlledSelect
+ControlledField.DatePicker = ControlledDatePicker
 
 export { ControlledField }
 export * from './types'

src/components/organisms/ControlledField/types.ts

@@ -6,6 +6,7 @@ import {
   FieldRadioGroupProps,
   FieldSelectProps,
   FieldCheckboxProps,
+  FieldDatePickerProps,
 } from '@/components/molecules'
 
 // -----------------------
@@ -68,3 +69,13 @@ export type ControlledCheckboxProps<TFieldValues extends FieldValues = FieldValu
   'onChange' | 'isChecked'
 > &
   ControlledFieldProps<TFieldValues>
+
+// -----------------------
+// ----- DATEPICKER ------
+// -----------------------
+
+export type ControlledDatePickerProps<TFieldValues extends FieldValues = FieldValues> = Omit<
+  FieldDatePickerProps,
+  'onChangeDate' | 'date'
+> &
+  ControlledFieldProps<TFieldValues>