Is there any way to vertically align the calendar icon for the DatePickerInput in "outlined" mode

[JPStrydom]

When rendering the DatePickerInput with mode="outlined", the calendar icon is not vertically aligned within the input box:

I can't seem to find a styling option to style the calendar icon - I've tried style, underlineStyle, outlineStyle, and contentStyle but not of these seemed to work.

Is there a way to vertically align of style the icon?

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[JPStrydom]

This is quite easy to replicate on the official DatePickerInput snack with the following code:

import React from "react";
import { View, Text } from "react-native";
import { DatePickerInput } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function App() {
  const [inputDate, setInputDate] = React.useState(undefined)

  return (
    <SafeAreaProvider>
      <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
        <DatePickerInput
          locale="en"
          label="Birthdate"
          value={inputDate}
          onChange={(d) => setInputDate(d)}
          inputMode="start"
          mode="outlined"
        />
      </View>
    </SafeAreaProvider>
  );
}

The will produce the following misaligned icon:

Here is a reproduction example: react-native-paper-dates-input.zip

[iM-GeeKy]

@JPStrydom Thanks for opening this issue. If this issue is critical for you, please consider sending a pull request to fix it. If not, we will do our best to get it resolved when available.

[SoyDiego]

I think this issue can be closed, right? I can see in mode="outlined" perfectly centered.

[JPStrydom]

I think this issue can be closed, right? I can see in mode="outlined" perfectly centered.

Has there been an update to the library recently?

[SoyDiego]

I think this issue can be closed, right? I can see in mode="outlined" perfectly centered.

Has there been an update to the library recently?

Sorry, my last screenshot was in Linux. Now I'm in Windows and I can see the problem. Very weird. I will try to solve it later.

Thanks!

[SoyDiego]

@JPStrydom I did a PR and I think solves the problem. If you can check it will be great: https://github.com/web-ridge/react-native-paper-dates/pull/315

[JPStrydom]

@JPStrydom I did a PR and I think solves the problem. If you can check it will be great: https://github.com/web-ridge/react-native-paper-dates/pull/315

The code looks good. Will let you know if it works once it's gone live 👍

[SoyDiego]

@JPStrydom I did a PR and I think solves the problem. If you can check it will be great: #315

The code looks good. Will let you know if it works once it's gone live 👍

The release is done and works perfectly on windows and Linux