Picker UI not updated if min/max set programmatically with new architecture

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

还没有人认领这个 Issue。

评估

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

调研方向

Start by reading the DateTimePicker implementation and its iOS code paths for controlled value updates under the new architecture; the issue does not name specific files or tests. Use the linked reproduction repository and follow its steps to compare old and new architecture behavior. Done means the displayed time updates to 22 when the controlled value changes from 21 to 22 in the new architecture.

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

描述

Bug report

Summary

I create time range picker in my app which contains 2 DateTimePickers with mode="time". There is given initial time range eg 22:00 (one picker) - 02:00 (second picker). User is has to be able to choose any range which is laying in initial one. Because of pickers time can be in one or different days I am not setting minimumDate and minimumDate. Bounds are applied to value in onChange function.
Shortly:

const [value, setValue] = useState<Date>(new Date(boundDateTimestamp));
const handleTimeChange = (date: Date) => {
const boundDate = new Date(boundDateTimestamp);
setValue(date.getTime() < boundDateTimestamp ? boundDate : date);
};

Issue: UI of DateTimePicker not updated when time value changed and passed, it's stays the same as user have chose. For old react native architecture I was resolving this issue by passing key={new Date().getTime()} to DateTimePickers, so when component will get new time value it will always rerender. But this trick not working with new architecture.

This is video how it was working in old architecture with key trick
https://github.com/user-attachments/assets/3545b25b-67ea-4bf4-bc5f-1c81d447727f

With new architecture I can't update UI even with key trick. How can I achieve same result I have with old architecture?

Reproducible sample code

Here is repo with example https://github.com/mariia-korzun/datetimepicker-issue
To compare results in old/new architectures just need to toggle newArchEnabled in app.json

Steps to reproduce

For new architecture:

  1. Run yarn and npx expo prebuild --clean and yarn ios
  2. On DateTimePicker spinner choose 21 - UI wont render 22 despite value has changed to 22
    For old architecture:
  3. Toggle newArchEnabled in app.json
  4. Run npx expo prebuild --clean and yarn ios
  5. On DateTimePicker spinner choose 21 - UI updated to 22

Environment info

npx expo-env-info output:

#   
expo-env-info 2.0.7 environment info:
    System:
      OS: macOS 15.6.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v18.19.0/bin/yarn
      npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
      Watchman: 2024.11.11.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.2, iOS 18.2, macOS 15.2, tvOS 18.2, visionOS 2.2, watchOS 11.2
    IDEs:
      Android Studio: 2024.3 AI-243.22562.218.2431.13114758
      Xcode: 16.2/16C5032a - /usr/bin/xcodebuild
    npmPackages:
      expo: ~52.0.47 => 52.0.47 
      expo-router: ~4.0.21 => 4.0.21 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.9 => 0.76.9 
      react-native-web: ~0.19.13 => 0.19.13 
    npmGlobalPackages:
      eas-cli: 11.0.3
    Expo Workflow: bare

Time zone name (If the problem you have is related to unexpected time / date. See list in https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).

datetimepicker version: 8.4.4

iOS version: 18.3

主要语言
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 摘要。