How to use iOS code in React Native?

When you are developing hybrid apps, you must come up with the following situation: 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 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). For the demo purpose, I'm using UILabel in React Native.

Let’s begin opening our iOS project in Xcode👇

Step 1: Create Swift File

To create a swift file, go through the following steps:-

1. Right-click on the project 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.

In “LabelView.swift” I'm creating a native UILabel. You can create your UI:

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 the Objective-C file. For that go through the following steps:-

1. Right-click on the project directory and click “New File”.
2. Select “Cocoa Touch Class” then click “Next”.
3. Type “LabelViewModule” in the class field.
4. Select “RCTViewManager” in the “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

Create a new Swift file and name it “LabelViewManager.swift”, replace the code with the following:

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

Step 7: Render The View

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

import { requireNativeComponent } from 'react-native'

Then after the imports, let’s get the components:

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

Then render the above component:

<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.🎉

Stay Connected🔔

Thank you for reading until the end. Before you go:

• 👏 Please consider clapping and following me!
• 🔗 Follow on LinkedIn | GitHub
• 📝 More content at mobodevstuff.com
• 🎨 Check out my portfolio at manishahire.com