[iOS] App crashes with multiple DateTimePicker modals - UIDatePickerContainerViewController conflicts

[karengharibyan]

[iOS] App crashes with multiple DateTimePicker modals - UIDatePickerContainerViewController conflicts

Bug Report

Problem

iOS app crashes when multiple DateTimePicker components are used, particularly when:

• Multiple date pickers exist on the same screen
• Rapid navigation between screens containing date pickers
• Conditional rendering of date picker components

Environment

• Package Version: @react-native-community/datetimepicker@8.4.4
• React Native: 0.81.1
• Platform: iOS (iOS 13.0+)
• React: 19.1.0

Expected Behavior

Multiple date pickers should work without conflicts, allowing users to interact with different date/time selectors smoothly.

Actual Behavior

• App crashes when multiple UIDatePickerContainerViewController instances are presented
• UI becomes unresponsive
• Inconsistent modal behavior
• Memory leaks from orphaned containers

Reproduction Steps

1. Create multiple DateTimePicker components in a React Native app
2. Use them on the same screen or navigate rapidly between screens with date pickers
3. Trigger multiple date picker modals in succession
4. Observe crashes or UI freezing on iOS

Code Example

// This pattern causes issues on iOS
export const CustomDateTimePicker: FC<IDateTimePicker> = ({ mode = 'datetime', onChange, value }) => {
  const [visible, setVisible] = useState<boolean>(false);

  return Platform.OS === 'ios' ? (
    <View>
      <DateTimePicker
        display="default"
        value={new Date(value)}
        mode={mode}
        onChange={onValueChange}
      />
    </View>
  ) : (
    // Android implementation
  );
};

Proposed Solution

We've developed a working patch that resolves this issue through:

1. Method Swizzling

Intercepts UIViewController.presentViewController to handle date picker conflicts:

+ (void)initialize {
    // Swizzle presentViewController to prevent conflicts
    // (Full implementation in attached patch)
}

2. Proactive Cleanup

+ (void)destroyAllDatePickerContainers {
    // Recursively finds and dismisses all UIDatePickerContainerViewController instances
    // Prevents accumulation of orphaned modals
}

3. Touch Event Handling

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    // Cleanup existing containers before any interaction
    [RNDateTimePicker destroyAllDatePickerContainers];
}

Results After Fix

• ✅ Stable operation with multiple date pickers
• ✅ No crashes or UI freezing
• ✅ Proper modal lifecycle management
• ✅ Memory leak prevention
• ✅ Consistent behavior across all usage patterns

Files Included

• Patch File: patches/@react-native-community+datetimepicker+8.4.4.patch
• Full Documentation: Available upon request

Request

We would like this fix to be considered for inclusion in the main package to resolve this critical iOS stability issue. The patch:

• ✅ Is thoroughly tested
• ✅ Uses safe, proven techniques (method swizzling)
• ✅ Has minimal performance impact
• ✅ Maintains full API compatibility
• ✅ Resolves the issue completely

Would the maintainers be open to reviewing this solution for potential integration into the main codebase?

Additional Information

This issue affects many React Native iOS applications using multiple date pickers. The patch provides a robust, production-ready solution that has been tested in real-world scenarios.

Happy to provide additional details, testing results, or adjust the implementation based on maintainer feedback.

[karengharibyan]

@react-native-community+datetimepicker+8.4.4.patch

[yonitou]

Same issue

[karengharibyan]

@yonitou use patch from comments

[yonitou]

What is the difference between your patch and this PR ? #1009

[sterlingwes]

I don't think it'd help in the case I'm trying to solve for (inline pickers), but it points to the same underlying issue potentially - retained references