React Native [0.45.1] Integration with the existing apps
Purpose
This repository was made for React Natvie users who want to integrate RN[0.45.1] to the existing application using Swift3, Obbjective-C, JAVA, Kotlin. Integration with existing apps is well documented, but I wanted to make it more easy. This document was recorded after the recent test. Feel free to make Pull Request. Thanks.
Develop Enviroment
This document is based on below version. React Native currently changes a lot, so be careful.
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1"
}If you have iOS and Android application independently, this will be the perfect guide for you. Please follow these steps.
Getting started
Step 1. Install tools and init project
Install tools
you can also see this in Getting Started
brew install node
brew install watchman
npm install -g react-native-cli
If you are all done with the above, init your project.
react-native init ReactProject
In your ReactProject directory, you can find package.json. this should look like this.
{
"name": "ReactProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}you can't use
expowhen you integrate with existing apps.
Step 2. Add postinstall in package.json
{
"name": "ReactProject",
"version": "0.0.1",
"private": true,
"scripts": {
"postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}Currently, RN 0.45.1 have a problem in iOS - #import <RCTAnimation\\/RCTValueAnimatedNode.h>. You need to change it to #import "RCTValueAnimatedNode.h. So use postinstall
Step 3. Git clone your iOS and Android Project
Main purpose of this step is to make a structure for configuration management. You can just copy and paste to /android directory and /iOS directory. or git clone to make a structure as below.
[React native repository]
|
|- /android [Android repository]
|- /ios [iOS repository]
Step4. Modify iOS project
You can do this step easily with the iOS depedency tool cocoapods. Add libraries in Podfile and pod install
#React Native
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTImage',
'RCTWebSocket',
'DevSupport',
'BatchedBridge',
'RCTAnimation'
]
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'Make UIViewController to present React Native view
import UIKit
import React
import SnapKit
class ReactViewController: UIViewController, ZBAnSimPopupDelegate {
var reactView: RCTRootView!
var item_id: Int?
override func loadView() {
super.loadView()
guard let id = item_id else { return }
let mockData = ["item_id": "\(id)"]
self.reactView = ReactBridge.shared.viewForModule("ReactProject", initialProperties: mockData)
self.view.addSubview(self.reactView)
self.reactView.snp.makeConstraints { (m) in
m.edges.equalTo(self.view)
}
}
}Add React Bridge to communicate with index.ios.js <-> UIViewController. forHotReloading flag is for compile bundle or localhost.
let localUrl = "http://localhost:8081/index.ios.bundle?platform=ios&dev=true"
let forHotReloading = false
class ReactBridge: NSObject {
static let shared = ReactBridge()
}
extension ReactBridge: RCTBridgeDelegate {
func sourceURL(for bridge: RCTBridge!) -> URL! {
return URL(string: localUrl)
}
func createBridgeIfNeeded() -> RCTBridge {
let bridge = RCTBridge.init(delegate: self, launchOptions: nil)
return bridge ?? RCTBridge()
}
func viewForModule(_ moduleName: String, initialProperties: [String : Any]?) -> RCTRootView {
if forHotReloading {
let viewBridge = createBridgeIfNeeded()
let rootView: RCTRootView = RCTRootView(
bridge: viewBridge,
moduleName: moduleName,
initialProperties: initialProperties)
return rootView
} else {
if let iosBundle = Bundle.main.url(forResource: "main", withExtension: "jsbundle") {
guard let bundleRootView = RCTRootView(bundleURL: iosBundle, moduleName: moduleName, initialProperties: initialProperties, launchOptions: nil) else { return RCTRootView() }
return bundleRootView
}
}
return RCTRootView()
}
}Add ReactManager.swift to call method with Native <-> React-Native
@objc(ReactManager) class ReactManager: NSObject {
var bridge: RCTBridge!
@objc func back(_ reactTag: NSNumber) {
DispatchQueue.main.async {
if let view = self.bridge.uiManager.view(forReactTag: reactTag) {
let presentedViewController = view.reactViewController()
presentedViewController?.navigationController?.pop(animated: true)
}
}
}
} We need an addtional Objective-C file beacuse React uses macro. Add ReactManagerBridge.m file like this
#import "ReactManagerBridge.h"
#import "zigbang-Swift.h"
@implementation ReactManagerBridge
RCT_EXPORT_MODULE(ReactManager);
RCT_EXPORT_METHOD(back:(nonnull NSNumber *)reactTag) {
ReactManager* reactManager = [[ReactManager alloc] init];
reactManager.bridge = _bridge;
[reactManager back:reactTag];
}
@endStep4. Modify Android project
add dependency in build.gradle
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
in your app.gradle. I added exclude becuase it conflicts with existing dependecies
compile ("com.facebook.react:react-native:+") {
exclude group:'com.facebook.stetho', module:'stetho'
}
Add ReactInstanceManager to use it in React Native. I recommend to make an instance in Mainapplication because it takes some time to generate an instance
public static ReactInstanceManager react;
this.react = ReactInstanceManager.builder()
.setApplication(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactManagerBridge())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();Modify your ReactRootView where you want to use. Also, add props to pass parameter
@BindView(R.id.container)
ReactRootView container;
react = MainApplication.react;
Bundle props = new Bundle();
props.putString("items", new Gson().toJson(response));
container.startReactApplication(react, "ReactProject", props);
Add bridge to communicate with Native
class ReactManagerBridge() : ReactPackage {
override fun createJSModules(): List<Class<out JavaScriptModule>> {
return emptyList()
}
override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
val modules = ArrayList<ViewManager<*, *>>()
return modules
}
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
val modules = ArrayList<NativeModule>()
modules.add(ReactManager(reactContext))
return modules
}
}Add reactmanager to call method
class ReactManager(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
fun ReactManager(reactContext: ReactApplicationContext) {
super.getReactApplicationContext()
}
override fun getName(): String {
return "ReactManager"
}
@ReactMethod
fun alert(message: String) {
Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show()
}
}This is all about setting your react native to existing application!