-
- Notifications
You must be signed in to change notification settings - Fork 448
Description
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:
- Run
yarn
andnpx expo prebuild --clean
andyarn ios
- On DateTimePicker spinner choose 21 - UI wont render 22 despite value has changed to 22
For old architecture: - Toggle newArchEnabled in app.json
- Run
npx expo prebuild --clean
andyarn ios
- 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