react-native-svg
react-native-svg copied to clipboard
borderTopLeftRadius and borderTopRightRadius style elements not respected
Bug
The following Svg File:
import React, {FC} from 'react';
import {Svg, G, Rect, Circle, Polygon, SvgProps} from 'react-native-svg';
type ImagePlaceholderProps = {
width: number;
height: number;
};
type SvgWithOmittedProps = Omit<SvgProps, 'width' | 'height' | 'viewBox' | 'preserveAspectRatio'>;
const ImagePlaceholder: FC<ImagePlaceholderProps & SvgWithOmittedProps> = ({width, height, ...moreProps}) => {
console.log('MoreProps', moreProps);
return (
<Svg {...moreProps} width={width} height={height} viewBox="0 0 1600 1200" preserveAspectRatio="xMidYMid slice">
<G id="Service-Placeholder" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<Rect id="Rectangle" fill="#E5E7F6" x="0" y="0" width="1600" height="1200" />
<Circle id="Oval" fill="#D8D8D8" cx="824" cy="600" r="120" />
<Polygon id="Triangle" fill="#F1EEEE" points="564 332 988 904 140 904" />
<Polygon id="Triangle" fill="#FFFFFF" points="1024 444 1448 904 600 904" />
</G>
</Svg>
);
};
export default ImagePlaceholder;
Used in the following way:
import React, {FC} from 'react';
import styled from 'styled-components/native';
import {responsiveWidth} from 'react-native-responsive-dimensions';
const LargePlaceholderImage = styled(ImagePlaceholder)`
width: ${Math.round(responsiveWidth(66))}px;
height: ${Math.round(responsiveWidth(33))}px;
border-top-left-radius: ${Math.round(responsiveWidth(6))}px;
border-top-right-radius: ${Math.round(responsiveWidth(6))}px;
`;
Does not round the upper corners of the SVG as expected:
See Image:

Unexpected behavior
The image corners are sharp and unrounded. I expect them to be rounded as the passed in style attributes should clip the resulting image.
Environment info
React native info output:
info Fetching system and libraries information...
System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 183.24 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /Users/bram/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 22.0.1, 24.0.0, 27.0.3, 28.0.3, 29.0.0, 29.0.2
System Images: android-24 | Intel x86 Atom, android-24 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 11.7/11E801a - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_92 - /usr/bin/javac
Python: 3.6.6 - /Users/bram/.pyenv/shims/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.0 => 0.63.0
Library version: 12.1.0