react-native-svg
react-native-svg copied to clipboard
Markers are broken on iOS and Android
Bug
Markers do not render on both iOS and Android with latest v12.1.0
Unexpected behavior
Reusing the sample code to render markers on Path is broken. No markers show.
Environment info
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 4.50 GB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.14.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 26, 27, 28, 29
Build Tools: 26.0.2, 26.0.3, 27.0.3, 28.0.3, 29.0.0, 29.0.2
System Images: android-26 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_241 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
Library version: 12.1.0
Steps To Reproduce
Issues without reproduction steps or code are likely to stall.
- git clone https://github.com/ghanemabdo/react-native-svg_marker_sscce
- cd react-native-svg_marker_sscce
- yarn
- react-native run-ios
- sample code renders on simulator/device without markers
Describe what you expected to happen:
-
The Path rendered from the sample code should show a marker at the end of the path. The marker does not appear
-
Using snack on the web with the same sample code, markers show correctly
Short, Self Contained, Correct (Compilable), Example
Sample code used to repro the issue
<Svg width="400" height="200" viewBox="0 0 4000 2000">
<Defs>
<Marker
id="Triangle"
viewBox="0 0 10 10"
refX="0"
refY="5"
markerUnits="strokeWidth"
markerWidth="4"
markerHeight="3"
orient="auto"
>
<Path d="M 0 0 L 10 5 L 0 10 z" />
</Marker>
</Defs>
<Rect
x="10"
y="10"
width="3980"
height="1980"
fill="none"
stroke="blue"
strokeWidth="10"
/>
<Path
d="M 1000 750 L 2000 750 L 2500 1250"
fill="none"
stroke="black"
strokeWidth="100"
markerEnd="url(#Triangle)"
/>
</Svg>