Thursday, May 21, 2026
HomeiOS Developmentios - Learn how to use view created in swift inside an...

ios – Learn how to use view created in swift inside an objective-c++ file?

[ad_1]

I’m attempting to make use of react-native's new structure and I’ve enabled material for a similar. I’m able to use a view created in objective-c++ inside my typescript code. However I wish to use a view created in swift with UIKit in my objective-c++ file

The documentation on react-native’s web site remains to be for the outdated structure of utilizing bridge so it doesn’t instantly apply in my case. There are fairly vital adjustments within the new structure.

Under is the working code for objective-c++ file

    #import <Basis/Basis.h>
    #import "RNThubView.h"
    
    #import <react/renderer/elements/RNThubViewSpec/ComponentDescriptors.h>
    #import <react/renderer/elements/RNThubViewSpec/EventEmitters.h>
    #import <react/renderer/elements/RNThubViewSpec/Props.h>
    #import <react/renderer/elements/RNThubViewSpec/RCTComponentViewHelpers.h>
    
    #import "RCTFabric/React-RCTFabric-umbrella.h"
    
    
    
    utilizing namespace fb::react;
    
    @interface RNThubView () <RCTThubViewViewProtocol>
    
    @finish
    
    @implementation RNThubView {
      UIView *_view;
      UILabel *_label;
    }
    
    + (ComponentDescriptorProvider)componentDescriptorProvider
    {
      return concreteComponentDescriptorProvider<ThubViewComponentDescriptor>();
    }
    
    - (instancetype)initWithFrame:(CGRect)body
    {
      if (self = [super initWithFrame:frame]) {
        static const auto defaultProps = std::make_shared<const ThubViewProps>();
        
        _props = defaultProps;
        
        
        _rnThubView = [[RNThubView alloc] init];
        _view = [[UIView alloc] init];
        
        _label = [[UILabel alloc] init];
        _label.textual content = @"Preliminary worth";
        [_view addSubview:_label];
        
        _label.translatesAutoresizingMaskIntoConstraints = false;
        [NSLayoutConstraint activateConstraints:@[
          [_label.leadingAnchor constraintEqualToAnchor:_view.leadingAnchor],
          [_label.topAnchor constraintEqualToAnchor:_view.topAnchor],
          [_label.trailingAnchor constraintEqualToAnchor:_view.trailingAnchor],
          [_label.bottomAnchor constraintEqualToAnchor:_view.bottomAnchor],
        ]];
        _label.textAlignment = NSTextAlignmentCenter;
        
        self.contentView = _view;
    
        
      }
      
      return self;
    }
    
    - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
    {
      const auto &oldViewProps = *std::static_pointer_cast<ThubViewProps const>(_props);
      const auto &newViewProps = *std::static_pointer_cast<ThubViewProps const>(props);
      
      if (oldViewProps.shade != newViewProps.shade) {
        //    NSString * colorToConvert = [[NSString alloc] initWithUTF8String: newViewProps.shade.c_str()];
        //    [_view setBackgroundColor:[self hexStringToColor:colorToConvert]];
        //    _view.backgroundColor = [UIColor redColor];
      }
      
      [super updateProps:props oldProps:oldProps];
    }
    
    Class<RCTComponentViewProtocol> ThubViewCls(void)
    {
      return RNThubView.class;
    }
    
    - hexStringToColor:(NSString *)stringToConvert
    {
      NSString *noHashString = [stringToConvert stringByReplacingOccurrencesOfString:@"#" withString:@""];
      NSScanner *stringScanner = [NSScanner scannerWithString:noHashString];
      
      unsigned hex;
      if (![stringScanner scanHexInt:&hex]) return nil;
      int r = (hex >> 16) & 0xFF;
      int g = (hex >> 8) & 0xFF;
      int b = (hex) & 0xFF;
      
      return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:1.0f];
    }
    
    @finish

Now to make use of a view which is created in swift inside my objective-c++ file, I take advantage of the next method

Created a swift file known as RNThubView. Following is the code for a similar

@objcMembers class RNThubView: UIView {
  let btnLogin:UIButton = {
      let btn = UIButton(kind:.system)
      btn.backgroundColor = .blue
      btn.setTitle("Login", for: .regular)
      btn.tintColor = .white
      btn.layer.cornerRadius = 5
      btn.clipsToBounds = true
      btn.translatesAutoresizingMaskIntoConstraints = false
      return btn
  }()
  
  
  required init?(coder aDecoder: NSCoder) {
    tremendous.init(coder: aDecoder)
  }
  
  override init(body: CGRect) {
    tremendous.init(body: body)
    self.addSubview(btnLogin)
    addConstraintsToButtonLogin()
  }
  
  func addConstraintsToButtonLogin(){
    btnLogin.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
      btnLogin.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
      btnLogin.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
      btnLogin.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
  }
  
  
}

And I up to date my objective-c++ file code to the next

- (instancetype)initWithFrame:(CGRect)body
{
  if (self = [super initWithFrame:frame]) {
    static const auto defaultProps = std::make_shared<const ThubViewProps>();
    
    _props = defaultProps;
     
    
    _rnThubView = [[RNThubView alloc] init];
    self.contentView = _rnThubView
   .....
......

Remainder of the code stays principally the identical in objective-c++ file.

Now once I run through cli, the app crashes with no logs on cli. After I run through Xcode, I get following logs with a white display on the simulator

flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Community
2022-07-04 19:16:34.262238+0530 FabricSwift[51914:596543] [connection] nw_socket_handle_socket_event [C1.1:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:34.290263+0530 FabricSwift[51914:596543] [connection] nw_socket_handle_socket_event [C1.2:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:34.293022+0530 FabricSwift[51914:596537] [connection] nw_connection_get_connected_socket [C1] Shopper known as nw_connection_get_connected_socket on unconnected nw_connection
2022-07-04 19:16:34.296327+0530 FabricSwift[51914:596537] TCP Conn 0x600001130370 Failed : error 0:61 [61]
2022-07-04 19:16:36.557475+0530 FabricSwift[51914:596543] [connection] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:36.558768+0530 FabricSwift[51914:596543] [connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:36.559075+0530 FabricSwift[51914:596538] [connection] nw_connection_get_connected_socket [C5] Shopper known as nw_connection_get_connected_socket on unconnected nw_connection
2022-07-04 19:16:36.559146+0530 FabricSwift[51914:596538] TCP Conn 0x600001104840 Failed : error 0:61 [61]
2022-07-04 19:16:36.728528+0530 FabricSwift[51914:596578] [javascript] Working "FabricSwift" with {"material":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
2022-07-04 19:16:37.065773+0530 FabricSwift[51914:596539] [connection] nw_socket_handle_socket_event [C9.1:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:37.066881+0530 FabricSwift[51914:596539] [connection] nw_socket_handle_socket_event [C9.2:1] Socket SO_ERROR [61: Connection refused]
2022-07-04 19:16:37.067294+0530 FabricSwift[51914:596539] [connection] nw_connection_get_connected_socket [C9] Shopper known as nw_connection_get_connected_socket on unconnected nw_connection
2022-07-04 19:16:37.067425+0530 FabricSwift[51914:596539] TCP Conn 0x6000011370d0 Failed : error 0:61 [61]
assertion failed [thread_context != nullptr]: bought an exception for an unknown thread
(ExceptionServer.cpp:809 handle_exception)
Message from debugger: Xcode has killed the LLDB RPC server to permit the debugger to detach out of your course of. You could must manually terminate your course of.

Full supply is right here https://github.com/PritishSawant/ReactNativeFabricSwiftTry

[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments