Skip to content

fix(android): reopen picker when design changes - #1055

Open
giaBaoJS wants to merge 1 commit into
react-native-datetimepicker:masterfrom
giaBaoJS:fix/android-reopen-picker-on-design-change
Open

fix(android): reopen picker when design changes#1055
giaBaoJS wants to merge 1 commit into
react-native-datetimepicker:masterfrom
giaBaoJS:fix/android-reopen-picker-on-design-change

Conversation

@giaBaoJS

@giaBaoJS giaBaoJS commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Summary

On Android, switching the design prop on a mounted picker closes the dialog and never reopens it.

RNDateTimePickerAndroid has two effects. The first one dismisses the dialog and lists design in its dependencies, because the default and Material pickers are backed by different native modules:

https://github.com/react-native-datetimepicker/datetimepicker/blob/a523007/src/datetimepicker.android.js#L44-L48

The second one opens the dialog, forwards design in its params, but does not list it in its dependencies:

https://github.com/react-native-datetimepicker/datetimepicker/blob/a523007/src/datetimepicker.android.js#L84-L91

So when design changes, React runs the first effect's cleanup, which calls DateTimePickerAndroid.dismiss(mode, previousDesign), and the second effect never re-runs. The picker disappears. mode is already handled the same way and works correctly; design was simply missed when the Material pickers were added in #952.

The fix adds design to the second dependency array, so a design change tears down the old dialog and opens the new one, exactly like a mode change.

Test Plan

Added a Jest test that renders the Android component with design="default", rerenders it with design="material", and asserts DateTimePickerAndroid.open is called for both designs.

On master the test fails, showing only the first open call:

    - Expected  - 1
    + Received  + 0

      Array [
        "default",
    -   "material",
      ]

With the fix, yarn test is green (25 tests) and yarn lint reports 0 errors, same warning count as master.

What's required for testing (prerequisites)?

yarn

What are the steps to reproduce (after prerequisites)?

yarn test

Compatibility

OS Implemented
iOS
Android

Checklist

  • I have tested this on a device and a simulator
  • I added the documentation in README.md
  • I updated the typed files (TS and Flow)
  • I added a sample use of the API in the example project (example/App.js)
  • I have added automated tests, either in JS or e2e tests, as applicable

The effect that dismisses the dialog already reacts to design, but the
effect that opens it did not, so switching design closed the picker
without reopening it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant