Date input field no longer responds to width changes on web

[JPStrydom]

Current behaviour

When running on web (with React Native Web) the DateInputField does not scale to the width of it's parent container, where it used to do so.

Here is the behavior on version 0.18.19:

Expected behaviour

The DateInputField should respond to width changes on web.

Here is the behavior on version 0.18.14:

How to reproduce?

Place the DateInputField in a View that scales to 100% of available width:

<View style={{ width : '100%' }}>
  <DatePickerInput {...props}  />  
</View>

What have you tried so far?

Changing the following code in src/Date/DatePickerInputWithoutModal.tsx seems to fix the issue:

const styles = StyleSheet.create({
  root: {
    flexGrow: 1,
    width: '100%', // Adding this to all these styles fixes the issue
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  inputContainer: {
    flexGrow: 1,
    width: '100%', // Adding this to all these styles fixes the issue
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  input: {
    flexGrow: 1,
    width: '100%', // Adding this to all these styles fixes the issue
  },
})

Your Environment

software	version
react-native	0.71.8
react-native-paper	^5.10.3
react-native-web	~0.18.12
node	18.16.0
npm	9.5.1
expo sdk	^48.0.20

[JPStrydom]

I've created a PR which should address this issue.

[iM-GeeKy]

@JPStrydom

Here is a code snipped in the example app on our repo.

<View
  style={[
    {
      alignItems: 'center',
      flexDirection: 'row',
      marginTop: 16,
    },
  ]}
>
  // This could be an icon or any other view...
  <Button>Test</Button>
  <DatePickerInput
    locale={locale}
    value={inputDate}
    onChange={setInputDate}
    inputMode="start"
    autoComplete={'birthdate-full'}
    style={styles.marginBottomEight}
  />
</View>

[JPStrydom]

I've created a PR which should address this issue.

This PR looks like it did the trick 👍

Going to close this for now. Happy to reopen it if anyone has any issues with it.

[SoyDiego]

Hi @JPStrydom, your PR was working good in your use case, but has problem in Mobile (check the images of @iM-GeeKy above).

I have created a new PR: https://github.com/web-ridge/react-native-paper-dates/pull/329 If you can check it too, would be perfect to test all devices and ways. I think with my code I solved both issues:

• When we have a element on the left.
• The responsiveness in Web.

I hope be the correct solution, If not, we will continue researching.

@iM-GeeKy maybe you should open this issue until we solve it :)

[JPStrydom]

I'll take a look at the new version today and confirm if it's still working on web 👍

[SoyDiego]

I'll take a look at the new version today and confirm if it's still working on web 👍

Great, I will wait. Thanks

[JPStrydom]

I'll take a look at the new version today and confirm if it's still working on web 👍

Looks like all is still in order on the web version 👍

[SoyDiego]

Great, thanks for your confirmation. Happy all is working ok 👌