Positioning of the content within a ScrollView breaks when you enable zooming

This issue has been tracked since 2022-09-23.

Description

Me and a colleague are using the ScrollView with react-native-svg to show a graphical representation of a plant. The user can manipulate the plant and that will update the entire drawing. We noticed some weird behaviour after enabling the zoom functionality. The position of the drawing is not correct after the user zooms out and the plant gets re-rendered with a different size. We have created a small example with just the ScrollView and Rectangle component to test this out. The demo is described below.

Version

0.68.2 (tested on the latest version as well)

Output of npx react-native info

I have created a snack to demo the issue, but within the project I get the following information:

info Fetching system and libraries information...
System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1
    Memory: 161.25 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.1 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 16.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
info React Native v0.70.1 is now available (your project is running on v0.68.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.70.1.
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.68.2.
info To upgrade, run "react-native upgrade".

Steps to reproduce

  1. Open the Snack in iOS;
  2. In the Snack example you can see a blue rectangle where you can swipe vertically;
  3. When you pinch zoom the container and let go the rectangle reposition itself correctly;
  4. Press the rectangle will change the dimensions of the SVG (parent) element within the ScrollView;
  5. The position of the rectangle is not correct anymore and we can't find a solution why.

Screenshot 2022-09-23 at 11 57 04

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@ontwikkelaars_fabrique/scrollview-demo?platform=ios

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-10-03
Star Count 105144
Watcher Count 3666
Fork Count 22469
Issue Count 2232

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date