Integrate React-Native into Swift 3

Question

I have a working application that responds to native. IOS project files are created based on the native response, which is based on Objective-C. It was harder for me to convert Objective-C to Swift. So I decided to make a simple project in swift 3, and then integrate React Native into it. I followed the instructions here: http://facebook.imtqy.com/react-native/docs/integration-with-existing-apps.html

I took the first steps, but when it comes to:

Magic: RCTRootView Now that your React Native component is created using index.ios.js, you need to add this component to a new or existing ViewController. The easiest way is to optionally create a path to your component, and then add this component to an existing ViewController.

We will associate our React Native component with a new native view in the ViewController, which will actually host it under the name RCTRootView.

There is no example or proper explanation.

Are there any ready-made templates or any complete tutorial on how to integrate responsive to your native project with fast 3?

---

UPDATE:

According to this guide: https://gist.github.com/boopathi/27d21956fefcb5b168fe

I updated my project to look like this: AppDelegate.swift:

import UIKit import CoreData @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // initialize the rootView to fetch JS from the dev server let rootView = RCTRootView() rootView.scriptURL = NSURL(string: "http://localhost:8081/index.ios.js.includeRequire.runModule.bundle") rootView.moduleName = "OpenCampus" // Initialize a Controller to use view as React View let rootViewController = ViewController() rootViewController.view = rootView // Set window to use rootViewController self.window = UIWindow(frame: UIScreen.mainScreen().bounds) self.window?.rootViewController = rootViewController self.window?.makeKeyAndVisible() return true } func applicationWillResignActive(_ application: UIApplication) { // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state. // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game. } func applicationDidEnterBackground(_ application: UIApplication) { // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later. // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits. } func applicationWillEnterForeground(_ application: UIApplication) { // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background. } func applicationDidBecomeActive(_ application: UIApplication) { // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface. } func applicationWillTerminate(_ application: UIApplication) { // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:. // Saves changes in the application managed object context before the application terminates. if #available(iOS 10.0, *) { self.saveContext() } else { // Fallback on earlier versions } } // MARK: - Core Data stack @available(iOS 10.0, *) lazy var persistentContainer: NSPersistentContainer = { /* The persistent container for the application. This implementation creates and returns a container, having loaded the store for the application to it. This property is optional since there are legitimate error conditions that could cause the creation of the store to fail. */ let container = NSPersistentContainer(name: "OpenCampus") container.loadPersistentStores(completionHandler: { (storeDescription, error) in if let error = error as NSError? { // Replace this implementation with code to handle the error appropriately. // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development. /* Typical reasons for an error here include: * The parent directory does not exist, cannot be created, or disallows writing. * The persistent store is not accessible, due to permissions or data protection when the device is locked. * The device is out of space. * The store could not be migrated to the current model version. Check the error message to determine what the actual problem was. */ fatalError("Unresolved error \(error), \(error.userInfo)") } }) return container }() // MARK: - Core Data Saving support @available(iOS 10.0, *) func saveContext () { let context = persistentContainer.viewContext if context.hasChanges { do { try context.save() } catch { // Replace this implementation with code to handle the error appropriately. // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development. let nserror = error as NSError fatalError("Unresolved error \(nserror), \(nserror.userInfo)") } } } } 

ViewController.swift:

 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } override func prefersStatusBarHidden() -> Bool { return true } } 

The title of the project-name-bridge:

 #ifndef OpenCampus_Briding_Header_h #define OpenCampus_Briding_Header_h #endif /* OpenCampus_Briding_Header_h */ find ../../../node_modules/react-native/React -name "*.h" | awk -F'/' '{print "#import \""$NF"\""}' 

and this is the result:

Answer 1

Well, surprisingly, the code works without editing AppDelegate.swift. I just imported the codepush into the Bridging header.

So, create a new quick file, select to make the header for the Objective-C bridge, then delete the AppDelegate.m AppDelegate.h and main.h files. Import the following modules into the Bridging header (ProjectName-Bridging-Header.h):

 #import "RCTBridgeModule.h" #import "RCTBridge.h" #import "RCTEventDispatcher.h" #import "RCTRootView.h" #import "RCTUtils.h" #import "RCTConvert.h" #import "CodePush.h" 

And AppDelegate.swift should look like this:

 import Foundation import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? var bridge: RCTBridge! func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject : AnyObject]?) -> Bool { let jsCodeLocation = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true") // jsCodeLocation = NSBundle.mainBundle().URLForResource("main", withExtension: "jsbundle") let rootView = RCTRootView(bundleURL:jsCodeLocation, moduleName: "****ModuleName****", initialProperties: nil, launchOptions:launchOptions) self.bridge = rootView.bridge self.window = UIWindow(frame: UIScreen.mainScreen().bounds) let rootViewController = UIViewController() rootViewController.view = rootView self.window!.rootViewController = rootViewController; self.window!.makeKeyAndVisible() return true } 

And replace the module name with the module that you register in index.ios.js or index.android.js (App Registery)