strokeCap / strokeLinecap about react-native-svg HOT 13 CLOSED

@magicismight This is June, 2018 and the snippet

<Line
x1={0}
x2={100}
y1={0}
y2={0}
stroke="black"
strokeWidth={2}
strokeLinecap="round" // < ---- doesn't work
/>

Doesn't work!

from react-native-svg.

We use strokeLinecap instead of strokeCap.
Because stroke-linecap is a valid svg attribute not stroke-cap.
And it is supported on [email protected] both android and iOS.

from react-native-svg.

strokeLinecap works fine on android.
You can try the example code.

import Svg, {
    Path,
    Rect,
    G,
    Defs,
    Stop,
    RadialGradient,
    Polyline,
    ClipPath,
    Circle,
    Text
} from 'react-native-svg';

<Svg height="80" width="225">
            <G fill="none" stroke="black">
                <Path strokeLinecap="butt" strokeWidth="8" d="M5 20 l215 0" />
                <Path strokeLinecap="round" strokeWidth="8" d="M5 40 l215 0" />
                <Path strokeLinecap="square" strokeWidth="8" d="M5 60 l215 0" />
            </G>
</Svg>

Maybe you imported the elements from the old react-native-art-svg instead of react-native-svg?

from react-native-svg.

Which component did you used?
And the art module issue is fixed by now,
Thx for reporting this to me.
I will release those fixes to npm by next Monday.

from react-native-svg.

Good find!
👍
Get it be fixed in last commit

from react-native-svg.

BTW
This package has changed name to react-native-svg now.
And it is no longer based on ReactNativeART

from react-native-svg.

Hey thanks for the feedback. I upgraded to react-native-svg but had to manually install the "art" npm module. It's not very clear in the instructions that it is needed. Also I've made a pull request because patternReg.js was missing.

The linecaps are default to square now, but I'm still not able to change them with the <Line> component. 😞

from react-native-svg.

Which react-native-svg version did you installed?
And did you install by npm2? or npm3?

from react-native-svg.

[email protected] and npm2 (2.14.7)

from react-native-svg.

Oh it seems like Github omitted my <Line> string from a previous comment, so I have to escape with code formatting... Anyway I tried using Path like you suggested and strokeLinecap works! So it seems the problem is that this property is not working for <Line> component?

from react-native-svg.

It's the <Line>component that has issues.
I'm glad to help, by the way great job on this package!

Here's an example:

<Line
            x1={0}
            x2={100}
            y1={0}
            y2={0}
            stroke="black"
            strokeWidth={2}
            strokeLinecap="round"    // < ---- doesn't work
            />

from react-native-svg.

I will fix this soon.

from react-native-svg.

This is Nov. 2023, with [email protected], the strokeLinecap="round" still does not work for Line or Path

from react-native-svg.