react / react/react-native

ScrollView snapToInterval/snapToOffsets not working when the scrollView width is a float number in IOS.

Ouverte
#48,393 8 commentaires 6 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: ScrollView Issue: Author Provided Repro Platform: iOS
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

Description

ScrollView snapToInterval/snapToOffsets not working when the scrollView width is a float number in IOS, because isHorizontal method in RCTEnhancedScrollView return a unexpected result when the width is a float.

- (BOOL)isHorizontal:(UIScrollView *)scrollView
{
  return scrollView.contentSize.width > self.frame.size.width;
}

In my reproducer: https://snack.expo.dev/@hiyuki/scrollview-snaptointerval-bug, when i set scrollView's width with a integer, such as 100, snapToInterval/snapToOffsets works fine, but when i set the width with a float number, such as 100.3, snapToInterval/snapToOffsets does't work.

Steps to reproduce
  1. open the reproducer link: https://snack.expo.dev/@hiyuki/scrollview-snaptointerval-bug
  2. execute it with expo go in a IOS device
  3. scroll the scrollView content vertically, snapToInterval/snapToOffsets does't work when touch up
React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 14.3.1
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 1.77 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 9.8.1
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0-alpha.2
    wanted: 15.0.0-alpha.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: ^0.76.5
  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
Reproducer

https://snack.expo.dev/@hiyuki/scrollview-snaptointerval-bug

Screenshots and Videos

set ScrollView's width with 100.3, snapToInterval/snapToOffsets does't work.

https://github.com/user-attachments/assets/23b5d09f-a45a-4a6b-8327-1feba66bc41f

set ScrollView's width with 100, snapToInterval/snapToOffsets works fine.

https://github.com/user-attachments/assets/e72e4934-46f2-4601-b5ec-01c800ee7f3a

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la méthode RCTEnhancedScrollView's isHorizontal: et reproduisez le problème à l'aide du Snack lié, avec des largeurs de ScrollView entières et à virgule flottante sur iOS. Vérifiez que snapToInterval et snapToOffsets effectuent correctement le snap avec des largeurs fractionnaires, et examinez le comportement iOS associé avec la configuration React Native 0.76.5 signalée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, objective-c, react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.