Skip to content

Commit

Permalink
fix: set default strokeWidth to 1 on android (#2269)
Browse files Browse the repository at this point in the history
# Summary

According to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width),
when `strokeWidth` is not provided, the default value should be set to
`1`.

On android, when we update the `strokeWidth` prop to `undefined` it was
mistakenly converted to `0` by `SVGLength`.

Fixes #2266 

## Test Plan

Test available in `TestsExample/Test2266` 

### What are the steps to reproduce (after prerequisites)?

* Run `TestsExample` app
* Replace `ColorTest` with `Test2266` in `App.js`
  • Loading branch information
jakex7 committed May 9, 2024
1 parent 680806e commit ee63425
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 1 deletion.
1 change: 1 addition & 0 deletions TestsExample/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import PointerEventsBoxNone from './src/PointerEventsBoxNone';
import Test2071 from './src/Test2071';
import Test2089 from './src/Test2089';
import Test2196 from './src/Test2196';
import Test2266 from './src/Test2266';

export default function App() {
return <ColorTest />;
Expand Down
27 changes: 27 additions & 0 deletions TestsExample/src/Test2266.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, {useState} from 'react';
import {Button, View} from 'react-native';
import {Circle, Svg} from 'react-native-svg';

export default () => {
const [strokeWidth, setStrokeWidth] = useState<undefined | number>(undefined);
return (
<View>
<Svg viewBox="0 0 30 10" width={400} height={200}>
<Circle cx="5" cy="5" r="3" stroke="green" />
<Circle cx="15" cy="5" r="3" stroke="green" strokeWidth="3" />
<Circle cx="25" cy="5" r="3" stroke="green" strokeWidth="2%" />
</Svg>
<Button
title="stroke: undefined"
onPress={() => setStrokeWidth(undefined)}
/>
<Button title="stroke: 0" onPress={() => setStrokeWidth(0)} />
<Button title="stroke: 1" onPress={() => setStrokeWidth(1)} />
<Button title="stroke: 2" onPress={() => setStrokeWidth(2)} />
<Svg viewBox="0 0 30 10" width={400} height={200}>
<Circle cx="5" cy="5" r="3" stroke="green" strokeWidth={strokeWidth} />
<Circle cx="10" cy="5" r="3" stroke="green" />
</Svg>
</View>
);
};
2 changes: 1 addition & 1 deletion android/src/main/java/com/horcrux/svg/RenderableView.java
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ public void setStrokeDashoffset(float strokeDashoffset) {
}

public void setStrokeWidth(Dynamic strokeWidth) {
this.strokeWidth = SVGLength.from(strokeWidth);
this.strokeWidth = strokeWidth.isNull() ? new SVGLength(1) : SVGLength.from(strokeWidth);
invalidate();
}

Expand Down

0 comments on commit ee63425

Please sign in to comment.