Trying to animate the show/hide of the datetimepicker

[mattwoberts]

Hi all.

I'm trying to animate the datetimepicker, so that similar to the add event on google calendar or apple calendar, you can click to expand / collapse the datepicker.

However, it's not playing. the date picker is stubbornly remaining there on screen, even though the view it's within expands its height as I click to toggle. Does anyone know if this is possible?

Here's the code I'm using:

  <Animated.View style={{ backgroundColor: 'yellow', paddingRight: 10, paddingLeft: 45, paddingTop: -10, height:heightAnimation }}>
    <DateTimePicker
      testID="dateTimePicker"
      value={date}
      mode='date'
      is24Hour={true}
      display="inline"
      onChange={onChange}
    />
  </Animated.View>

Here's it working when it's expanded:

.. but when I contract:

Is this a limitation of the native control, or is this possible?

Thanks

[running0x]

I have found this to be an extreme limitation of this component. Upgrading from IOSDatePicker to this component is seemingly impossible because you cannot close the modal without "dismiss" event which is unable to be sent to the component.

[vonovak]

I believe there should be a way to make this work, you just need to make the DateTimePicker View consume animated styles. A PR for this use case is welcome.

[YaoHuiJi]

~~solution 1:~~ ~~I add a forwardRef prop to support React.forwardRef, to make DateTimePicker an animatable component. I'm not very~~ ~~sure if it's a good solution,but it works for me. Here is the PR ~~

solution 2: I find this solution by accident.... just wrap the outer view with MaskedView, and this strange issue is solved, I don't know why....but it works

import MaskedView from '@react-native-community/masked-view';

<MaskedView maskElement={<View style={{flex: 1, backgroundColor: 'black'}} />}>
   <Animated.View style={{ backgroundColor: 'yellow', paddingRight: 10, paddingLeft: 45, paddingTop: -10, height:heightAnimation }}>
      <DateTimePicker
        testID="dateTimePicker"
        value={date}
        mode='date'
        is24Hour={true}
        display="inline"
        onChange={onChange}
      />
    </Animated.View>
</MaskedView>

update: I met this issue with some other rnc components, I think it's about the Height of Animated.View and his child view which is datetimepicker here. the inner view has a fix Height, but the outer animated view has a dynamic Height value from 0~Height, if the outer view's height is smaller than the inner view, this issue happens.

<View style={{marginTop: 100, height: 10, width: 60, backgroundColor: 'green'}}>// let say the height is 10 at a certain animation frame, now you will see the red view is out of the green view
  <View style={{height: 50, width: 20, backgroundColor: 'red'}} />
</View>

[mattwoberts]

This looks interesting, thanks. For my project, we decided for the time being at least to switch to the react-native-modal-datetime-picker package. Although we're seeing other issues with that, so it's on my todo-list to come back to this and see if we can find something that works...

[vonovak]

hello, I'm closing this as I answered here: https://github.com/react-native-datetimepicker/datetimepicker/issues/664#issuecomment-1315551752

thank you 🙂