search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.35k stars 1.11k forks source link

SVGUri Being Cropped on Android Only #1953

Open brandon-austin-lark opened 1 year ago

brandon-austin-lark commented 1 year ago

Bug

When using an SvgUri component to render an Svg, the image is being cropped on Android only (iOS is working just fine). I can confirm that this has nothing to do with the image being wrapped in parent views as I have tried to remove those and render only the SVG but the issue persists. I've tried to update the viewbox, the width & the height and none of those have proven to fix the issue

Environment info

React native info output:

System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Max Memory: 412.20 MB / 64.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 14.17.0 - /var/folders/x8/sbbv51kj7pz53ctrp14r32vh0000gq/T/yarn--1672773193899-0.09534999817446499/node Yarn: 1.22.17 - /var/folders/x8/sbbv51kj7pz53ctrp14r32vh0000gq/T/yarn--1672773193899-0.09534999817446499/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /Users/brandonwork/.rvm/gems/ruby-2.7.5/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: API Levels: 28, 29, 30, 31, 32 Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0 System Images: android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-32 | Google APIs ARM 64 v8a, android-Tiramisu | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.6 => 0.69.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Library version: "react-native-svg": "12.3.0"

Describe what you expected to happen:

  1. SvgUri should be rendered properly on Android

Short, Self Contained, Correct (Compilable), Example

 <ImageContainer>
       <StyledSvg height={250} width={250} uri={imageURL ?? null} />
 </ImageContainer>

const ImageContainer = styled.View`
  align-items: center;
  justify-content: center;
`;

const StyledSvg = styled(SvgUri)`
  margin-top: 40px;
`;
laygir commented 8 months ago

Same situation here, somehow Android not liking masked svg visuals

laygir commented 8 months ago

Following helped me solve it.

https://stackoverflow.com/a/71734840/4012944

I am using Figma and trick was to put my mask into a frame that is same size as the parent frame and use the frame as the mask.

bohdanprog commented 2 weeks ago

Hello @brandon-austin-lark, If you still have that problem please provide a simple example to reproduce that issue. Thank you