iOS: Slider sometimes does not mount at full width

Open
#745 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
react-native
Domain
mobile

Research direction

Start by reproducing the slider's initial mount in a react-native-navigation modal under React Native 0.77 with the new architecture enabled, using style={{ width: '100%' }} and an initial value of 3.6. Investigate the slider's layout behavior during mounting; done means the track consistently renders at full width while retaining normal 0-to-5 selection.

Written by the indexing model from the issue text.

Description

bug report

Environment

  • react-native info output:
// react-native info
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.3
    wanted: ^0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Description

On initial mount of a new component that contains a slider, the slider will very rarely not expand to full width even though we have styled it as such. Here's a screenshot:

Image

In this example the slider is being set with an initial value of 3.6 (out of 5.0), but you can see the actual track of the slider is only rendering at less than half the width that it should be. Note that we render the tick-marks ourselves, not via the repo, but they show that we expect the slider to be full width. The slider still functions normally at this point, allowing selection of values 0 to 5 but only along this tiny track. 98% of the time when pushing this screen it appears normally...this just appears to be an odd race condition.

This only started happening after I upgraded from RN 0.76 to 0.77 and enabled the new architecture, and upgraded slider from 4.5.0 to 5.0.1. I suspect it's related to new arch.

Reproducible Demo

Not reproducible every time so this is tough. But it's a slider with style={{ width: '100%' }} set and the component is presented via a react-native-navigation (wix) modal

Dominant language
TypeScript
Stars
1.4k
Forks
295
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-native-slider

All issues in callstack/react-native-slider

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.