Repository navigation
fix(web): start at 0 when value is 0 and the range includes 0 - #829
Open
huytdps13400 wants to merge 1 commit into
Open
huytdps13400 wants to merge 1 commit into
huytdps13400 wants to merge 1 commit into
Conversation
The web component seeded its internal state with
`initialValue || minimumValue`, so `value={0}` (which Slider forwards as
`undefined`, defaulted back to `0`) started the thumb at `minimumValue`
whenever the minimum is negative. The layout effect cannot correct it
because `lastInitialValue` also starts at `0`.
Only fall back to `minimumValue` when 0 lies outside the range.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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:
Fixes #828
On web,
<Slider minimumValue={-8} maximumValue={8} value={0} />renders the thumb at the minimum instead of in the middle.Root cause:
RNCSliderNativeComponent.web.tsxseeds its state withinitialValue || minimumValue.0is falsy, so it falls back tominimumValue. The layout effect never corrects it, becauselastInitialValuealso starts at0. Note thatSliderforwardsvalue={0}asundefined(passedValue), so the web component can't tell "no value" apart fromvalue={0}. Because of that, the??approach suggested in the issue wouldn't fix it on its own.Change: fall back to
minimumValueonly when0lies outside[minimumValue, maximumValue]. When the range includes0, the initial value is0, which matches the documented default and thecurrentValuethatSlideralready uses for step markers. Nothing else changes: non-zero values work as before, ranges where0is below the minimum still start atminimumValue, and the effect guard for uncontrolled sliders is untouched.Test Plan:
Added
package/__test__/RNCSliderNativeComponent.web.test.tsx. It renders the web component, firesresponderGrant, and checks the value passed toonRNCSliderSlidingStartand the minimum track'sflexGrow(the thumb position as a percentage).value={0}and novaluewith range -8...8 report-8instead of0).npx eslint src __test__reports 0 errors (same warnings asmain), andnpx tsc --noEmitpasses.Note:
npx jestcurrently fails onmainfor every suite (this._moduleMocker.clearMocksOnScope is not a function). Thereact-nativejest preset's environment resolvesjest-environment-node@29againstjest@30, and CI shows the same failure. I ran the suite locally with a jest 30 node environment (--testEnvironmentpointing at a copy ofreact-native/jest/react-native-env.jsthat extendsjest-environment-node@30): 5 suites / 20 tests pass. This PR doesn't change the jest setup.This fix was prepared with AI assistance (Claude Code) and verified locally with the tests above.
🤖 Generated with Claude Code