ScrollView.scrollTo not checking ScrollView dimensions

[indapublic]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
      Memory: 164.89 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.13.0 - ~/.nvm/versions/node/v8.13.0/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.13.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 25.0.3, 27.0.3, 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.5 => 0.57.5
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Scroll is working well in sandbox https://codesandbox.io/s/1q1lq1407

But does not work in React Native. Seems like scroll does not check ScrollView dimensions

Reproducible Demo

Working example (probably, related to react-native-web?) https://codesandbox.io/s/1q1lq1407
Repository with reproducible example: https://github.com/indapublic/scrolltest

[kelset]

👋 there!

So, I just tested your repro (thanks for submitting btw!) and on a fresh 0.59 project the scroll to button works are expected.

My understanding is that your code wants to have the item to be in the center of the screen, but you are not considering the screen dimensions when you fire the scrollTo method.

So if you change your code to

  handleScrollToCenter = () => {
    if (this.containerRef && this.activeRef) {
      const { height } = Dimensions.get('window'); // THIS LINE
      const UIManager = NativeModules.UIManager;
      UIManager.measure(
        findNodeHandle(this.activeRef),
        (activeX, activeY, activeW, activeH) => {
          this.containerRef.scrollTo({
            x: 0,
            y: activeY - height / 2, // THIS LINE
            animated: true
          });
        }
      );
    }
  };

You should be able to have the desired effect (just tested locally).

[indapublic]

If you try to scroll by hand - scroll view is respecting dimensions (I'm sorry, English is not my native language, so probably I can't explain it). You cannot scroll view like on screen, 20th row always . should be on bottom. But scrollTo scrolling to center (it's not "human" behaviour)