Big spacing between DatePickerInput and component before or component after it.

[shaoweipng]

Current behaviour

Big spacing between DatePickerInput and component before or component after it.
I tried several kind of components like Text/Button/Text Input and I always hit this problem with DatePickerInput

Expected behaviour

There shouldn't be such a big space.

How to reproduce?

import React from "react";
import { format } from 'date-fns';
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(new Date())

return (

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


);
}

Preview

What have you tried so far?

Can easily reproduce this with the snack demo on react-native-paper-dates-input
See https://snack.expo.dev/@fitzwabs/react-native-paper-dates-input
Simply add some Text components before and after DatePickerInput

Your Environment

On both IOS and android

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	0.22.19
node	x.x.x
npm or yarn	x.x.x
expo sdk	x.x.x

[iM-GeeKy]

@shaoweipng Check out the Example App and it's Code it has the solution to your problem.

[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.

[shaoweipng]

thank you @iM-GeeKy ! You solved my problem. Appreciate your prompt response.

In case anyone has similar issue, the solution is have a View style of the following

  <View style={styles.row}>
    <DatePickerInput
      locale="en-GB"
      label="Birth Date"
      value={inputDate}
      onChange={(d) => setInputDate(d)}
      inputMode="start"
      mode="outlined"
      presentationStyle="pageSheet"
    />
  </View>

const styles = StyleSheet.create({
row: {
flexDirection: "row",
},
});