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

オープン
  • 何か問題がありますか？
#1,010 コメント 7 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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時間
マージ済み PR（30日）
5

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react-native-datetimepicker/datetimepicker のほかの issue

react-native-datetimepicker/datetimepicker の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。