datetimepicker: Inline iOS display in react native Modal is freezing application

Bug report

Summary

I run this code and it works:

import React, { FC } from 'react';
import { Modal, Text, View, TouchableOpacity } from 'react-native';

import DateTimePicker from '@react-native-community/datetimepicker';

const App: FC = () => (
  <Modal
    animationType="fade"
    transparent
    visible
    onRequestClose={ () => {} }
  >
    <View
      style={{
        backgroundColor: 'rgba(0, 0, 0, .3)',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}>
      <TouchableOpacity><Text>as</Text></TouchableOpacity>
      {/* <DateTimePicker
        mode={ 'date' }
        value={ new Date() }
        onChange={ () => {} }
        display="inline"
      /> */}
    </View>
  </Modal>
);

export default App;

I uncomment the DateTimePicker element and the application freezes:

import React, { FC } from 'react';
import { Modal, Text, View, TouchableOpacity } from 'react-native';

import DateTimePicker from '@react-native-community/datetimepicker';

const App: FC = () => (
  <Modal
    animationType="fade"
    transparent
    visible
    onRequestClose={ () => {} }
  >
    <View
      style={{
        backgroundColor: 'rgba(0, 0, 0, .3)',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
      }}>
      <TouchableOpacity><Text>as</Text></TouchableOpacity>
      <DateTimePicker
        mode={ 'date' }
        value={ new Date() }
        onChange={ () => {} }
        display="inline"
      />
    </View>
  </Modal>
);

export default App;

Reproducible sample code

Steps to reproduce

Paste the code pieces from above.

Describe what you expected to happen:

To not freeze 😕

Environment info

    "@react-native-community/datetimepicker": "3.2.0",
    "expo": "^41.0.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",

iOS version: 14.4, 14.5.1

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 16 (1 by maintainers)

Most upvoted comments

I recently chanced upon this piece of code from another library. https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/src/DateTimePickerModal.ios.js#L187

I have tried it and it seems that setting the height for the calendar component (height: 370) seems to resolve the freezing issue.

kohchihao on Jun 20, 2023

I have recently faced this issue as well. I am displaying the iOS calendar within @gorhom/bottom-sheet with their BottomSheetModal. It crashes when the bottom sheet is displayed and I quickly select a date. No solution and no error logs from xcode as well.

kohchihao on May 12, 2023

I recently chanced upon this piece of code from another library. https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/src/DateTimePickerModal.ios.js#L187

I have tried it and it seems that setting the height for the calendar component (height: 370) seems to resolve the freezing issue.

I’m using @gorhom/bottom-sheet with BottomSheetModal and this solution looks like works for me, thank you.

ser-emejia on Jul 11, 2023

When using react-native-datetimepicker in @gorhom/bottom-sheet with their BottomSheetModal, you’re app will lock up completely and will require a forced quit.

I moved my settings to a page to resolve, I found no workarounds.

mphill on Jun 18, 2023

Hi, just writing a small FIY for anyone having a similar issue with modals freezing (it was a freeze in my case, not a crash) the app on iOS.

In my case it was happening only on release type of builds.

What was causing the issue was the animated bar component (simple line that was being animated over time). Basically the bar was representing a countdown and the modal could be opened during the animation.

The line had width property animated with reanimated (v2). After changing the animation to target translateX in place of width, the problem disappeared 😃

danielmark0116 on Jan 18, 2023

Having the same problem with the “default” display (ios 14.5)

avishain on May 23, 2021