DatePickerInput rendering behind other components

[maciejors]

Current behaviour

The DatePickerInput renders in a wrong place. See the code and images below. The way I see it, text inputs render exactly where they would render if there was no DatePickerInput, and the DatePickerInput renders too high (see the first image). Also note the following:

• When I remove all text inputs, the date picker input renders in a way that its top half is covered by the app bar;
• When I add style={{ flex: 1 }} to the View which wraps the DatePickerInput and all text inputs, there is no overlap, however the date picker input tries to take up the whole remaining space (see the second image)

Expected behaviour

I would imagine that the date picker input should render between the first and the second text inputs with no overlapping, and also that it would not stretch when I apply flex: 1 to the parent view.

How to reproduce?

1. Run the following in the terminal to create an app:

npx create-expo-app
npm run reset-project
npm i react-native-paper react-native-paper-dates

2. Replace the contents of app/index.tsx with the following:

import { useState } from "react";
import { Text, View } from "react-native";
import { TextInput } from "react-native-paper";
import { DatePickerInput } from "react-native-paper-dates";

export default function Index() {
  const [date, setDate] = useState<Date | undefined>();

  return (
    <View>
      <TextInput placeholder="Enter text 1" />
      <DatePickerInput
        locale="en"
        label="Enter date"
        value={date}
        onChange={(d) => setDate(d)}
        inputMode="start"
      />
      <TextInput placeholder="Enter text 2" />
      <TextInput placeholder="Enter text 3" />
    </View>
  );
}

Or instead of running these steps, you can just clone this repo: https://github.com/maciejors/date-picker-app

I then run npm start and view the app on my Android phone using Expo Go app.

Note: I was not able to reproduce this problem on snack.expo.dev. For some reason, it works fine there, which adds to my confusion. However, the code I used to reproduce it there was different to the one in repo due to the limitations of snack.expo.dev - I had to remove _layout.tsx, app.json, etc., and put the code from app/index.tsx straight into App.tsx there. I do not have much experience with React Native, so I do not know how much difference it makes, either way this is the reason I provide a link to repo here instead of a link to snack app. As I mentioned, all the code from the repo aside from app/index.tsx is auto-generated by create-expo-app so it should be straightforward to reproduce

Preview

Image on the left: this variant uses the code exactly as in the repo
Image on the right: this is the variant where flex: 1 is added to the parent view: <View style={{ flex: 1 }}>

What have I tried so far?

1. Changing versions of packages to the ones used on your Expo Stack, because when I tested it there, it worked fine (no effect);
2. Wrapping the whole layout in SafeAreaProvider, and also using SafeAreaView instead of the parent View in the code above. The former has no effect, the latter shifts everything down by half the height of a single TextInput;
3. Wrapping DatePickerInput with an extra view and applying z-index (no effect).
4. Manually specifying height in the style for the DateInputPicker (it moves the "Enter Date" text a little, but otherwise has no effect)
5. Wrapping DatePickerInput with a view with paddingVertical: 28 makes everything look as expected, but I feel like this should not be necessary. However, it is a good temporary solution.

My Environment

software	version
ios	x
android	14
react-native	0.74.5
react-native-paper	5.12.5
node	20.11.0
npm	10.2.4
expo sdk	51.0.28

more information on the packages can be found in the package.json from the repo I linked above

[github-actions]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[github-actions]

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.

[maciejors]

Hi, there was actually a link to repo there, but maybe it was easy to miss, I updated the description so now maybe it is clearer how to reproduce the issue. I also added a note on why I did not put it on snack.expo.dev - in short, I was not able to reproduce it there. I had to simplify the app setup and for some reason everything worked fine there, which only adds to my confusion. I am starting to wonder whether maybe it has something to do with my phone more than with the package.

[devonik]

I just installed this library. I've the same issue with the single DatePicker. On web it renders fine but on mobile it overflows the other elements.

I fixed it for mobile with <View className="flex-1 max-h-14"> in the wrapper View. I dont like that I set the max height here but without the datepicker height use all space after setting flex-1 (the flex: 1 property fix the original problem)