How to use iOS code in React Native

When you are developing Hybrid Apps then you must have come up with this situation that How can I use the native code in React Native?

We can also use the Android Code in React Native. To learn how to use Android Code in React Native, click on here.

So let’s see, how to use native code in react native. Here we use swift code in react native. So, we need to create and bridge a UIView which will contain our components (label, image, anything we want).

We will need to work in Xcode, so let’s open up our project there.

Bridge Container View

Step 1: Create Swift File

For creating a swift file, go through the following steps:-

1. Right-click on the “./project_name/project_name” directory and click “New File”.
2. Select “Swift File” then click “Next”.
3. Type “LabelView.swift” and then click “Create”.
4. It will prompt you to create a bridging header when you click “Create”. Go ahead and click on “Create Bridging Header”.

Step 2: Configure the Objective-C Bridging Header

Click on “project_name-Bridging-Header.h” and replace its contents with:

#import “React/RCTViewManager.h”

Step 3: Write your UI Code in Swift file. (LabelView.swift)

Click on “LabelView.swift” and replace all of its contents with:

import Foundation
import UIKit
class LabelView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
let label = UILabel()
        self.label.frame = CGRect(x: 0, 
                                  y: 0, 
                                  width: self.frame.size.width, 
                                  height: self.frame.size.height
                            );
        self.label.text = "Native iOS Element (UILabel)"
        self.addSubview(label)
   }
}

Step 4: Use your swift class in React Native

Now, we added Objective-C file. For that go through the following steps:-

1. Right-click on the “./project_name/project_name” directory and click “New File”.
2. Select “Cocoa Touch Class” then click “Next”.
3. Type “LabelViewModule” in class filed.
4. Select “RCTViewManager” in “subclass of” menu.
5. Select the “Objective-C” language. Then click “Next”

Step 5: Configures .h & .m files

Click on LabelViewModule.h and replace all of its contents with the following:

#import <React/RCTViewManager.h>
@interface LabelViewModule : RCTViewManager
@end

Then click on LabelViewModule.m and replace all of its contents with:

#import "LabelViewModule.h"
@interface RCT_EXTERN_MODULE(LabelViewManager, RCTViewManager)
@end

Step 6: Add Manager Swift file

Now again follow the same steps to add the swift. Steps:-

1. Click on the “./project_name/project_name” directory and click “New File”.
2. Select “Swift File” then click “Next”.
3. Type in “LabelViewManager.swift” for the file name and then click “Create”.
4. Click it and replace its contents with:

import Foundation
@objc(LabelViewManager)
class LabelViewManager : RCTViewManager {
override func view() -> UIView! {
    return LabelView();
  }
}

Render The View

Now let’s open up your .js file and add requireNativeComponent import:

import { requireNativeComponent } from 'react-native'

Then after the imports, let’s get the component like this:

const LabelView = requireNativeComponent('LabelView', null);

Let’s now render this. Update our JSX to include:

<LabelView style={{ backgroundColor:'red', width:'100%', height:50 }}/>;

Save the file and run your project. You should see our view rendered:

Now you can use any native UI in react native.

Thank you,

Happy Coding 😊