Create a framework using React Native code.

I want to create a framework using React Native code but I couldn’t find solid guidelines for this. I struggled a lot for finding this solution and I thought it might help you who all want the same output.

You need two main projects:

1. React Native project.
2. iOS Framework

We will check step by step for creating a framework using react native code.

Create React Native project:

We will take the example of AwesomeProject. Create AwesomeProject using the following command

npx react-native init AwesomeProject

then install node modules using command

yarn install

after that go to ios folder and install pods using

pod install

now you are ready to run the application.

when you run iOS project, it will look like this.

npx react-native run-ios

Create iOS Framework:

Now we create one iOS framework project, we will keep this project in root folder where our React Native code.

Go to Xcode -> File -> New -> Project -> search Framework -> create DemoRNSDK SDK

Add podfile into framework, go to base folder from terminal and write command

pod init

Get Mugdha Mundhe’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

refere podfile which is in iOS folder and copy paste all React Native related details in this podfile, e.g.

Important part from this podfile is we have added line,

use_frameworks! :linkage => :static

It is the most important line in podfil.

install podfile and our framework looks like,

For running React Native code into our SDK, we need to add main.jsbundle into SDK. To create main.jsbundle from iOS folder you need to add command into package.json,

“build:ios”: “react-native bundle — entry-file=’index.js’ — bundle-output=’./DemoRNSDK/main.jsbundle’ — dev=false — platform=’ios’”,

now you can create main.jsbundle using command,

yarn build:ios

Now we need to add swift file for opening react native screen,

As you can see we have created swift file named OpenReactNativeCode.swift, in which we have added function openReactScreen which gives object of RCTRootView. This opens connection with React Native code using main.jsbundle.

Important part here is we have added
@_implementationOnly import React

Which allows us to use react into our SDK and avoid overburdened to add React Native and heavy node modules folder into client or demo application.

Now we will create xcframework for our framework using following commands,

xcodebuild archive -workspace ~/AwesomeProject/DemoRNSDK/DemoRNSDK.xcworkspace -scheme “DemoRNSDK” -archivePath ~/Desktop/Output/DemoRNSDK-iphonesimulator.xcarchive -destination=”generic/platform=iOS Simulator” SKIP_INSTALL=NO DEBUG_INFORMATION_FORMAT=dwarf-with-dsym BUILD_LIBRARY_FOR_DISTRIBUTION=YES BUILD_LIBRARIES_FOR_DISTRIBUTION=YES BITCODE_GENERATION_MODE=bitcode ENABLE_BITCODE=YES OTHER_CFLAGS=-fembed-bitcode defines_module=no -configuration Release -sdk iphonesimulator

xcodebuild archive -workspace ~/AwesomeProject/DemoRNSDK/DemoRNSDK.xcworkspace -scheme “DemoRNSDK” -archivePath ~/Desktop/Output/DemoRNSDK-iphoneos.xcarchive -destination=”generic/platform=iOS” SKIP_INSTALL=NO DEBUG_INFORMATION_FORMAT=dwarf-with-dsym BUILD_LIBRARY_FOR_DISTRIBUTION=YES BUILD_LIBRARIES_FOR_DISTRIBUTION=YES BITCODE_GENERATION_MODE=bitcode ENABLE_BITCODE=YES OTHER_CFLAGS=-fembed-bitcode defines_module=yes -configuration Release -sdk iphoneos

xcodebuild -create-xcframework -framework ~/Desktop/Output/DemoRNSDK-iphoneos.xcarchive/Products/Library/Frameworks/DemoRNSDK.framework -framework ~/Desktop/Output/DemoRNSDK-iphonesimulator.xcarchive/Products/Library/Frameworks/DemoRNSDK.framework -output ~/Desktop/Output/DemoRNSDK.xcframework

At this stage your DemoRNSDK.xcframework framework created. Kudos!!