[Native UI Component] Calculation of width/height for custom native UI element?

[aksonov]

I want to build iOS react native component - analog of Text, where width and height is not known, but calculated dynamically depending from its content. As I see from debugging, RCTText.drawRect method is called with calculated rect already, but my component is called with empty rect if i did not define sizes via styles.

How to define needed rect for custom View?

I know, it is not bug/issue, but it seems to be lack of documentation, so I'm asking here (i've asked the same at stack overflow, but looks like nobody knows there).

[alinz]

@aksonov, this might be the answer #1374

[aksonov]

Sorry, don't see how apply that measure function. Even opposite, I need to provide it for my custom view.

7 авг. 2015, в 22:13, Ali Najafizadeh notifications@github.com написал(а):

@aksonov, this might be the answer #1374

—
Reply to this email directly or view it on GitHub.

[alinz]

Here's what you have to do in order

var {
    React,
    NativeModules: {
        UIManager
    }
} = require('react-native');


class MyCustom extends React.Component {
    ...
}

UIManager is one of the internal utilities which can be used to calculate the location of your component in screen.

[aksonov]

I don't need to calculate location, but to create view without fixed width and height, like Text.

Pavel.

7 авг. 2015, в 23:53, Ali Najafizadeh notifications@github.com написал(а):

Here's what you have to do in order

var {
React,
NativeModules: {
UIManager
}
} = require('react-native');

class MyCustom extends React.Component {
...
}
UIManager is one of the internal utilities which can be used to calculate the location of your component in screen.

—
Reply to this email directly or view it on GitHub.

[brentvatne]

Hi @aksonov - for a detailed request like this is would help a lot to post an example repository that people can clone and experiment with. 'm not sure I have enough information to act here and code would probably fill that gap

[aksonov]

Okey, here is my test repository: https://github.com/aksonov/TestApp
The problem there is SVG Path element which i want to wrap by react View, make it clickable yet. I could scale it to fit screen, but i don't want to define its "width" and "height" (because i don't know it) but only "scale" property. The same as RCTText or RCTStaticImage. I've tried to study sources but still cannot find place where these elements (RCTText/RCTStaticImage) calculates its width/height and pass it to parent view.

SVG Path uses CGPathRef internally so it could get own height/width using
CGRect boundingBox = CGPathGetBoundingBox(path);
but how to pass it to "style" before drawing phase?

        <View style={{borderWidth:2}}>
        <SVGPath style={{width:1000, height:1000}} scale={0.5} filename="BezierCurve3"/>
          </View>

should be just

        <View style={{borderWidth:2}}>
        <SVGPath scale={0.5} filename="BezierCurve3"/>
          </View>

[aksonov]

Finally, I've found that code from Image.ios.js, so maybe best way is to do the same - use another native iOS utility class to get height/width for SVG path and call it from render() method like done in Image.ios.js:

    var source = resolveAssetSource(this.props.source) || {};

    var {width, height} = source;

[aksonov]

Sorry, that code doesn't help. Could you check test repository and my examples? I still can't find a way to get data from native UI component before rendering (to get width/height of svg element).

[aksonov]

Looks like magic is hidden within NativeMethodsMixin and its measure methods, but it is still not clear. Is there any documentation?

UPD: I've found text calculation within Layout.c static void layoutNodeImpl(css_node_t *node, float parentMaxWidth), but it is not clear how to make something similar for my component...

UPD2: Looks like it is done using RCTShadowText view for Text, so should i create own "shadow" view for my custom component which will calculate its size?

[aksonov]

Okey, finally i've found exactly what i need - create own RCTShadowView descendant, add shadowView factory method to my own RCTViewManager, override fillCSSNode method and do calculation within own RCTShadowView using C static function:

- (void)fillCSSNode:(css_node_t *)node
{
    [super fillCSSNode:node];
    node->measure = RCTCircleMeasure;
    node->children_count = 0;
}

Maybe you could add it to documentation, because now it is pretty difficult to find out.

[aksonov]

That way solved issue for 'child' element, but not for composite parent - native View. I expected View will calculate its size automatically as it does for children Text, but it doesn't... Please provide correct way, looks like I've missed something.

[aksonov]

Okey, probably i don't understand how React Native Layout works, I can't wrap View nicely around Text too. I've created issue #2465 for it.