ScrollView horizontal scrolling breaks (unable to scroll to end) when using minWidth instead of width: Math.max(minWidth, ...)
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
When using minWidth on a horizontally scrolling ScrollView, the scrollable content does not allow scrolling all the way to the end. Replacing minWidth: 500 with a computed width: Math.max(width * 0.9, 500) resolves the issue, making the full content scrollable.
Steps to reproduce
- open the snack reproducer
- run on a device with viewport width < 500 (e.g. Pixel 8)
- try to scroll to the end to observe the last item being cut off
React Native Version
0.78.0
Affected Platforms
Runtime - iOS, Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: macOS 15.4.1
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 222.21 MB / 64.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.3.0
path: /usr/local/bin/node
Yarn: Not Found
npm:
version: 10.9.0
path: /usr/local/bin/npm
Watchman:
version: 2025.03.10.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK:
API Levels:
- "34"
- "35"
Build Tools:
- 32.0.0
- 33.0.0
- 34.0.0
- 35.0.0
System Images:
- android-30 | Google Play Intel x86 Atom
- android-31 | Google APIs Intel x86_64 Atom
- android-33 | Google Play Intel x86_64 Atom
- android-34 | Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-34 | Google Play Intel x86_64 Atom
- android-35 | ARM 64 v8a
- android-35 | Intel x86_64 Atom
- android-35 | Google APIs Intel x86_64 Atom
- android-35 | Google Play Intel x86_64 Atom
- android-36 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2024.3 AI-243.22562.218.2431.13114758
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.13
path: /usr/bin/javac
Ruby:
version: 3.3.5
path: /usr/local/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: 15.0.1
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.78.0
wanted: 0.78.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
No crash/failure
MANDATORY Reproducer
https://snack.expo.dev/@alex_p8/calm-indigo-apples
Screenshots and Videos
Expected behavior (when scrolling to the end):
Actual behavior (when scrolling to the end):
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem obligatorischen Snack-Reproducer und dem für Android und iOS beschriebenen ScrollView-Verhalten. Vergleiche horizontales Scrolling mit minWidth: 500 mit dem Workaround über die berechnete Breite, und betrachte das Issue als erledigt, wenn das letzte Element auf Geräten mit einem Viewport, der schmaler als 500 ist, vollständig erreichbar ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100