fix(android): reopen picker when design changes - #1055
Open
giaBaoJS wants to merge 1 commit into
Open
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On Android, switching the
designprop on a mounted picker closes the dialog and never reopens it.RNDateTimePickerAndroidhas two effects. The first one dismisses the dialog and listsdesignin 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
designin 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
designchanges, React runs the first effect's cleanup, which callsDateTimePickerAndroid.dismiss(mode, previousDesign), and the second effect never re-runs. The picker disappears.modeis already handled the same way and works correctly;designwas simply missed when the Material pickers were added in #952.The fix adds
designto 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 withdesign="material", and assertsDateTimePickerAndroid.openis called for both designs.On
masterthe test fails, showing only the first open call:With the fix,
yarn testis green (25 tests) andyarn lintreports 0 errors, same warning count asmaster.What's required for testing (prerequisites)?
yarnWhat are the steps to reproduce (after prerequisites)?
yarn testCompatibility
Checklist
README.mdexample/App.js)