How to Add an iOS Native Framework in React Native Project?

How to Add an iOS Native Framework in React Native Project?

As an iOS developer, you may find yourself asking one day: how do I integrate native iOS frameworks into my React Native application? This blog will shows you how to add an iOS native framework in react native project.

Features

Custom SDK which provides you basic details of the card and in return the package displays the card details.

Getting Started

Open the iOS folder in the React Native project with Xcode.

Folder: {YourReactNativeProjectName}>ios>{yourprojectname}.xcworkspace

Use this Framework as a SDK

Add your XCFramework file here by dragging and dropping it in Frameworks, Libraries, and Embedded Content.

Path: {YourReactNativeProject}>iosgenerayourprojectname}.xcworkspace

Switch to AppDelegate.m in the iOS folder and import the framework and import the react native project name as header:

AppDelegate.m

Import framework:

#import <CustomerIOSFramework/CustomerIOSFramework-Swift.h>

Import the React Native project Name in the header.

Example:“testframework” is the name of the project 

Replace with your project name and import in the header.

#import “FirstProject-Swift.h”

Usage 

Add the native modules and invoke framework methods in AppDelegate  as below the implementation of AppDelegate .

Folder: ReactNativeProject>ios>projectname>AppDelagate.m

@implementation AppDelegate

//NativeModules

RCT_EXPORT_MODULE()

//Added NativeModules

RCT_EXPORT_METHOD(pushVC:(NSDictionary *)props){

  dispatch_async(dispatch_get_main_queue(), ^{

    [self invokeFramework:props[@”dict”][@”deviceId”] :props[@”dict”][@”env”] :props[@”dict”][@”number”] :props[@”dict”][@”sdkAuth”] :props[@”dict”][@”priOrgId”] :props[@”dict”][@”templetType”] :props[@”dict”][@”language”] ];

  });

}

//Invoking the CustomeriOSFramework

– (void)invokeFramework:(NSString*)deviceId :(NSString*)env :(NSString*)number : (NSString*)sdkAuth : (NSString*)priOrgId : (NSString*)templetType : (NSString*)language

{

  UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

  NSBundle *amazingBundle = [NSBundle bundleForClass:[LoadingVC class]];

  LoadingVC *yourVC = [[LoadingVC alloc] initWithNibName:@”LoadingVC” bundle:amazingBundle];

  yourVC.env = env;

  yourVC.number = number;

  yourVC.deviceId = deviceId;

  yourVC.sdkAuth = sdkAuth;

  yourVC.priOrgId = priOrgId;

  yourVC.templetType = templetType;

  yourVC.language = language;

  [[UIApplication sharedApplication].delegate.window.rootViewController presentViewController :yourVC animated:YES completion:nil];

    [window makeKeyAndVisible];

}

Write a calling method in React Native Project as on the specified as per developer choice Check out the below code snippet for the same.

Import the NativeModules:

Calling and passing the props to the  Customerframework through Native Modules:

NativeModules.AppDelegate.pushVC({

          dict: {

            ‘env’: ‘PROD’, //provide environment here 

            ‘number’: ’91*******’,//provide mobile number here

            ‘deviceId’: ‘************’,//provide device id here

            ‘sdkAuth’: ‘*********************************’, //provide Authentication Token here

            ‘priOrgId’: ‘*****’, //provide primary organization id here

            ‘templetType’: ‘********’, //provide your template name here

            ‘language’: ‘en’  //provide language type here

          }

        })

Final Output 

👉 A native application screen will appear in a react native project.

Conclusion:

In this blog, we have shown you how to add and invoke the iOS native framework to the React Native project.The React Native team is currently working on a re-architecture of the Native Module system. This new system is called TurboModules, and it will help facilitate more efficient type-safe communication between JavaScript and native, without relying on the React Native bridge. It will also enable new extensions that weren’t possible with the legacy Native Module system. You can read more about it here. Throughout these docs we have added notes around parts of Native Modules that will change in the TurboModules release and how you can best prepare for a smooth upgrade to TurboModules.

Additional reading: How to Add an iOS Native Framework in the Flutter Project? 

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

marketing cloud growth empowered by data cloud features and ai
Marketing Cloud Growth Empowered by Data Cloud Features and AI
spx with react a guide to react and spfx integration
SPFx with React: A Guide to React and SPFx Integration
salesforce-tabs-a-guide-to-crafting-custom-images-for-tab-styles
Salesforce Tabs: A Guide to Crafting Custom Images for Tab Styles
the future of automation how playwright is revolutionizing the testing industry
The Future of Automation: How Playwright is Revolutionizing the testing Industry
hyperforce for uae
Hyperforce for UAE
Scroll to Top