React Native custom iOS view that responds to height/width style - ios

Question

I'm trying to get my custom UIView to respond to width and height styles, e.g.
<MyCustomView style={{width: 200, height: 300}}/>
I've closely followed the simple example at https://github.com/brentvatne/react-native-dashed-border-example
Currently my View and ViewManager look like:
#import "MyCustomView.h"
#import "RCTViewManager.h"
#implementation MyCustomView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Create the component view
}
return self;
}
#end
and the ViewManager:
#implementation MyCustomViewManager
RCT_EXPORT_MODULE();
- (UIView *)view
{
return [[MyCustomView alloc] initWithFrame: [[UIScreen mainScreen] bounds]];
}
#end
However this of course always fills the screen. I want to be able to set the height on this component, and ideally using the RN method of passing it via style.
If I follow the simple border example, I end up with
#implementation MyCustomView
- (instancetype)init
{
self = [super init];
if (self) {
// Create the component view
}
return self;
}
#end
and
#implementation MyCustomViewManager
RCT_EXPORT_MODULE();
- (UIView *)view
{
return [[MyCustomView alloc] init];
}
#end
But the view does not show, and reports self.bounds.size.height to be 0.00.
Is there something I've missed to get this working? Do I need to employ RCTBridge? I did previously have the line
#synthesize bridge = _bridge;
as in https://github.com/brentvatne/react-native-dashed-border-example/blob/master/BVDashedBorderViewManager.m#L9 but I got an error saying "Bridge not set"

Answer 1

You can override reactSetFrame in your view and you'll get access to the frame whenever it's updated by a React Native layout:
- (void)reactSetFrame:(CGRect)frame
{
CGFloat height = frame.size.height;
// Do something with the height here
[super reactSetFrame: frame];
}
You'll need to import the React category for UIView if you're not already for that file:
#import "UIView+React.h"