Description

When the parent <View>’s width is changed at runtime (via useState or other dynamic styling), the <Line> | <Rect> inside an <Svg> with width="100%" does not redraw to fill the new width. Instead, it remains at the width it had when first mounted.

See recording:

• https://github.com/user-attachments/assets/65b1c34d-345b-44ae-9f55-ceb62612e7f6

I was able to workaround it with setting width to big number and setting overflow: "hidden" but I don't see it as proper solution.

Expected Behavior
When dynamicWidth changes, the <Line> should recompute its x2="100%" position and redraw to span the full width of its parent <View>.

Actual Behavior
After changing dynamicWidth, the <Svg> container indeed grows, but the <Line> remains stuck at its old length. Only a full re-mount of the <Svg> (for example by changing its key) causes the line to update.

Please let me know if you need any further information or if there’s a recommended workaround!

Steps to reproduce

1. Initialize state for the container width:

   const [dynamicWidth, setDynamicWidth] = useState(200);

2. Render an <Svg> inside a <View> whose width is driven by that state:

   <View style={{ width: dynamicWidth }}>
     <Svg height={DASH_HEIGHT} width="100%" style={styles.dash}>
       <Line
         x2="100%"
         stroke={borderColor}
         strokeWidth={DASH_HEIGHT}
         strokeDasharray="5, 2"
       />
     </Svg>
   </View>

3. Change dynamicWidth (e.g. via button press or layout change):

   setDynamicWidth(prev => prev + 100);

4. Observe that the yellow dashed line (the <Line>) does not extend to the new width.

Snack or a link to a repository

https://snack.expo.dev/67DG-eFawckFJjnxobrKh

SVG version

15.8.0

React Native version

Expo 52.0.0 / react-native 0.77.1

Platforms

iOS, Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes