ScrollView horizontal scrolling breaks (unable to scroll to end) when using minWidth instead of width: Math.max(minWidth, ...)
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
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):
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par le reproducteur Snack obligatoire et le comportement de ScrollView décrit pour Android et iOS. Comparez le défilement horizontal avec minWidth: 500 à la solution de contournement utilisant la largeur calculée, et considérez l’issue comme terminée lorsque le dernier élément est entièrement accessible sur les appareils dont le viewport est inférieur à 500.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100