Image gets tiled instead of centered.

[bob-devereux]

Bug

After converting SVG from a Figma export to react-native using @svgr/cli, the graphic does not show up correctly. The expectation is that the image will be centered in a circle, and it ends up getting tiled. The reproduction git repo has the original SVG.

Unexpected behavior

The image gets tiled instead of centered. https://github.com/bob-devereux/svgIssueReproduction.git

Environment info

React native info output:

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M3
  Memory: 82.70 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.1
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 10.5.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/lib/ruby/gems/3.3.0/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.3.0
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

"react": "18.2.0",
"react-native": "0.74.2",
"react-native-svg": "^15.3.0"

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

1. git clone https://github.com/bob-devereux/svgIssueReproduction.git
2. cd svgIssueReproduction
3. npm start -> (a)ndroid

Describe what you expected to happen:

1. I expect the W to be centered in the circle

   

2. This is what displays in the reproduction:

   

[bohdanprog]

Hello @bob-devereux, can you add to your repository that example, please? Thank you

[bob-devereux]

https://github.com/bob-devereux/svgIssueReproduction.git

[bohdanprog]

@bob-devereux but in that repo, you don't have react-native-svg package.

[bob-devereux]

You're correct, my mistake, I forgot to push a commit. I have pushed it, react-native-svg is a dependency App.tsx has the original svg from Figma and converted SVG. You can see how the original svg renders if you open the original.svg file in a browser.