Wednesday 27 July 2022

How to avoid setting manual UIView width and height on native side for Fabric component when using CAGradientLayer?

I am trying to create a fabric module for iOS using react-native's new architecture

In my objective-c++ file while setting a UIView, I have to assign a CGRect at time of init of UIView. If I don't on the native side and just give it on js side the view is not visible.

Following does not work

Objective-C++

_view = [[UIView alloc] init];
_gradient = [CAGradientLayer layer];
_gradient.frame = _view.bounds;
    _gradient.startPoint = CGPointZero;
    _gradient.endPoint = CGPointMake(1, 1);
 _gradient.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor blackColor].CGColor,(id)[UIColor blueColor].CGColor];
    [_view.layer insertSublayer:_gradient atIndex:0];
self.contentView = _view;

JS

 <YourEdgeLinearGradientView
          style=
/>

Following works

Objective-C++ 

_view = [[UIView alloc] initWithFrame:CGRectMake(0,0,400,400)];
...
...

JS

 <YourEdgeLinearGradientView
          style=
/>

but the issue is it occupies the width and height set on the native side and ignores js side I want to use

_view = [[UIView alloc] init];

without setting width and height on native side but setting it on js side

To add on more to this if I take a UIButton or a UILAbel instead of CAGradientLayer and apply constraints to UIView then I don't have to set CGRectMake to UIView

Also I don't want to pass width and height from the specs file, whatever I set from the style property should be applied. It works fine for android component but not for iOS.

Check this repo https://github.com/PritishSawant/-ReactNativeMultipleTurboModulesAndFabricExample

Go to the iOS folder => RNYourEdgeLinearGradientView.mm , https://github.com/PritishSawant/-ReactNativeMultipleTurboModulesAndFabricExample/blob/main/ios/RNYourEdgeLinearGradientView.mm

I am currently using

view = [[UIView alloc] init];

which causes issue and is not visible on JS side

If I use like below

_view = [[UIView alloc] initWithFrame:CGRectMake(0,0,200,200)];

then it works but I don't want to set width and height on iOS side. I want to use view = [[UIView alloc] init]; and whatever width and height I define in styles on react-native side, the view should occupy that



from How to avoid setting manual UIView width and height on native side for Fabric component when using CAGradientLayer?

No comments:

Post a Comment