How do I notify React Native that the size of a custom view has changed?

Question

I am writing a custom view for React Native iOS.

Basically, I have to make the text as large as possible (based on the presentation of the current view). I did this by overriding reactSetFrame and changing the frame. The only problem is that the view position is wrong, here is a screenshot:

It seems that the "layout manager" reacts to native, and it considers the views to be 0 in height.

Here is the code:

 - (void)reactSetFrame:(CGRect)frame { [super reactSetFrame:frame]; NSLog(@"react set frame %@", NSStringFromCGRect(frame)); [self fitText:self.text]; } - (void)fitText:(NSString *)text { // ... get the correct font size and expected size [self setFont:font]; CGRect newFrame = self.frame; newFrame.size.height = expectedLabelSize.height; NSLog(@"new frame is %@", NSStringFromCGRect(newFrame)); self.frame = newFrame; } 

basically, when changing the frame, I update the frame with the correct dimensions based on the transmitted text.

Log output is as follows:

 2017-06-25 16:43:16.434 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}} 2017-06-25 16:43:16.435 ABC[44836:6551225] new frame is {{0, 0}, {375, 69.197000000000017}} 2017-06-25 16:43:16.435 ABC[44836:6551225] react set frame {{0, 0}, {375, 0}} 2017-06-25 16:43:16.436 ABC[44836:6551225] new frame is {{0, 0}, {375, 85.996999999999986}} 

I tried again calling reactSetFrame with a new frame, but it does not work. Is there a way to tell React Native that the view size has changed?

Answer 1

So, I finally found a way to do this; mainly respond to the native, use the shadow representation to obtain information about the layout. So I had to add this code to my manager

 - (RCTShadowView *)shadowView { return [FitTextShadowView new]; } 

which basically says what a shadow view is for my component.

Then I had to change the implementation of the measurement function that Yoga uses to get the correct height:

 @implementation FitTextShadowView static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode) { FitTextShadowView *shadowText = (__bridge FitTextShadowView *)YGNodeGetContext(node); YGSize result; result.width = width; result.height = [shadowText getHeight:shadowText.text thatFits:width]; return result; } - (instancetype)init { if ((self = [super init])) { YGNodeSetMeasureFunc(self.yogaNode, RCTMeasure); } return self; } @end