Support for getBBox?

[steveliles]

Loving react-native-svg - thanks so much!

I am porting some code to React-Native that I originally wrote for the browser using React.js and SVG. Everything is working great so far, but I've run into a problem - I need to calculate the bounding box of various SVG groups ( elements).

To obtain the bounding box of a element in a browser, it is enough to use a ref to get a callback with the mounted element, then invoke the SVG spec's getBBox method on it, e.g.:

<g ref={(el)=>{console.log(el.getBBox())}}>
  <circle cx={100} cy={100} r={50}/>
  <circle cx={120} cy={80} r={60}/>
</g>

As far as I can tell there isn't currently any support for getBBox in react-native-svg, so ...

1. Are there any plans to introduce this support? (if so, is there a rough timeline?)
2. Is there a good alternative way to calculate the bounding box, taking into account transformations and such?

[magicismight]

Yes.there is a plan for shape elements bounding box calculation.
But Im not sure if G elements can get the bounding box for its children elements. Sadly,I dont have a timeline for this,because this is my free time project.
Maybe after the animation feature.

[steveliles]

OK - thanks for the quick response.

In the mean-time I've narrowed my current use-cases down to finding the bounding box of a <path> made up only of absolute coordinates or a <rect> where neither is subject to any transformation, so I can calculate the bounding box easily enough from the props.

[3rd-Eden]

This would make my life a hell lot simpler as I'm currently decoding the <path d='s value in order to get an estimated with but would be nice if it could be done with the api that was made for this.

[mdvacca]

HI @magicismight,
Do you have any workaround in mind to calculate the resulting width of a element?
I've been looking for many options but I was unable to find a solution.

Thanks!

[msand]

I've implemented matrix transforms of the Canvas.getClipBounds in GroupShadowNode, you could try exposing and using this.

https://github.com/msand/react-native-svg/blob/48cfe71acaad96e484ce46065c3fab497f37a168/android/src/main/java/com/horcrux/svg/GroupShadowNode.java#L41-L43

[maxkomarychev]

I added support for onLayout in this PR #651

[msand]

You can also use UIManager.measure, closing now.

[adrian-moisa]

Sry, but UIManager does not help. All I get are the X and Y. W and H are undefined :(

let svgRef: React.Component<SvgProps, any, any>;

setTimeout(() => {
    UIManager.measure(findNodeHandle(svgRef), (x, y, w, h) => {
        console.log('Args:', x, y, w, h);
    });
}, 100);

return (
    <View>
        <Svg fill='none'>
            <Path d={svgPath} ref={ref => svgRef = ref} />
        </Svg>
    </View>
);

and when using onLayout on <Svg> I get this nice error:

index.js:1 Warning: Unknown event handler property onLayout. It will be ignored

Also it seems typescript forbids it on <Path>

My unorthodox solution until I find the right answer would be to create a singletone service that keeps a hidden webview. I pass all my svg paths trough that view, I get the results of getBBox and pass them back to whatever script needs them. All wrapped behind a nice getSvgBBox custom method. Ugly as hell but it does the job until I find a proper solution.

I also tried using JS scripts that read the path data and return the bonding box. No reliable results so far.

[BlueDevil2k6]

Bringing this back from way back -- doesn't look like getBBox was ever implemented. Any chance someone has a good viable workaround? Use case is to trim the empty/white space around the SVG content automatically.

[Askill]

Hej everyone, any update on this?