software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.52k stars 1.13k forks source link

fix: getBBox size #2549

Closed jakex7 closed 1 week ago

jakex7 commented 1 week ago

Summary

When calling getBBox on rect, it will not give correct dimensions as markers that are 90% CGRectZero so CGRectUnion between some values and (0, 0, 0, 0) will return (0, 0, width, height)

Test Plan

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import { Rect, Svg } from 'react-native-svg';

function App(): React.JSX.Element {
  const ref1 = useRef<Rect>(null);

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Svg width={300} height={300}>
        <Rect
          x={100}
          y={100}
          width={100}
          height={100}
          fill="red"
          opacity={0.5}
          ref={ref1}
        />
      </Svg>
      <Button
        title="Press me"
        onPress={() => console.log(ref1.current?.getBBox())}
      />
    </View>
  );
}

export default App;

Before: return {"height": 100, "width": 100, "x": 0, "y": 0} After: return {"height": 100, "width": 100, "x": 100, "y": 100}

Compatibility

OS Implemented
iOS
MacOS