fix alignment calendar icon

Author: SoyDiego

src/Date/DatePickerInput.shared.tsx

@@ -21,6 +21,7 @@ export type DatePickerInputProps = {
   endYear?: number
   onChangeText?: (text: string | undefined) => void
   inputEnabled?: boolean
+  inputButton?: React.ReactNode
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText' | 'inputMode'

src/Date/DatePickerInput.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 
 import { IconButton } from 'react-native-paper'
-import { StyleSheet } from 'react-native'
 import DatePickerModal from './DatePickerModal'
 import { useLatest } from '../utils'
 import type { DatePickerInputProps } from './DatePickerInput.shared'
@@ -32,11 +31,10 @@ function DatePickerInput(
     <DatePickerInputWithoutModal
       ref={ref}
       {...rest}
-      inputButtons={
+      inputButton={
         withModal ? (
           <IconButton
             size={24}
-            style={styles.calendarButton}
             icon={calendarIcon}
             disabled={rest.disabled}
             onPress={() => setVisible(true)}
@@ -79,8 +77,4 @@ function DatePickerInput(
   )
 }
 
-const styles = StyleSheet.create({
-  calendarButton: { position: 'absolute', right: 0, zIndex: 10 },
-})
-
 export default React.forwardRef(DatePickerInput)

src/Date/DatePickerInputWithoutModal.tsx

@@ -20,7 +20,7 @@ function DatePickerInputWithoutModal(
     hideValidationErrors,
     onValidationError,
     modal,
-    inputButtons,
+    inputButton,
     saveLabel,
     saveLabelDisabled,
     uppercase,
@@ -76,6 +76,7 @@ function DatePickerInputWithoutModal(
       <View style={styles.root}>
         <View style={styles.inputContainer}>
           <TextInputWithMask
+            inputButton={inputButton}
             {...rest}
             ref={ref}
             label={getLabel({
@@ -94,7 +95,7 @@ function DatePickerInputWithoutModal(
             error={(!!error && !hideValidationErrors) || !!hasError}
             style={[styles.input, style]}
           />
-          {inputButtons}
+          {/* {inputButtons} */}
         </View>
         {error && !hideValidationErrors ? (
           <HelperText type="error" visible={!!error}>
@@ -136,6 +137,8 @@ function getLabel({
 const styles = StyleSheet.create({
   root: {
     flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
   },
   inputContainer: {
     flexGrow: 1,

src/TextInputMask.tsx

@@ -13,13 +13,18 @@ function escapeForRegExp(value: string): string {
 
 function TextInputWithMask(
   {
+    inputButton,
     onChangeText,
     onChange,
     value,
     mask,
     disabled,
     ...rest
-  }: React.ComponentProps<typeof TextInput> & { mask: string; value: string },
+  }: React.ComponentProps<typeof TextInput> & {
+    mask: string
+    value: string
+    inputButton: React.ReactNode
+  },
   ref: any
 ) {
   const [controlledValue, setControlledValue] = React.useState<string>(
@@ -69,17 +74,20 @@ function TextInputWithMask(
   }, [value])
 
   return (
-    <TextInput
-      ref={ref}
-      {...rest}
-      disabled={disabled}
-      value={controlledValue}
-      onChangeText={onInnerChange}
-      onChange={(e) => {
-        onChange && onChange(e)
-      }}
-      maxLength={10}
-    />
+    <>
+      <TextInput
+        ref={ref}
+        {...rest}
+        disabled={disabled}
+        value={controlledValue}
+        onChangeText={onInnerChange}
+        onChange={(e) => {
+          onChange && onChange(e)
+        }}
+        maxLength={10}
+        right={<TextInput.Icon icon={() => inputButton} />}
+      />
+    </>
   )
 }