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

未关闭
  • 哪里不对？
#1,010 7 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
28/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
ios, javascript, react-native
领域
mobile

调研方向

The report names the patch file patches/@react-native-community+datetimepicker+8.4.4.patch but does not identify the source files or tests to change. Read the patch and verify how its method swizzling and cleanup interact with the iOS picker lifecycle. Done means maintainers can reproduce the crash and confirm a reviewed fix prevents it; the issue has had no comment for 242 days.

由索引模型根据 Issue 内容生成。

描述

[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/[email protected]
  • 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.

主要语言
JavaScript
星标
2.9k
派生
459
平均合并
4 天 16 小时
30 天内合并 PR
5

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

react-native-datetimepicker/datetimepicker 的其他 Issue

查看 react-native-datetimepicker/datetimepicker 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。