Creating a Swift-ReactNative project

README.md

Settings

1. Create a project in XCode with the default settings
   • iOS > Application > Single View Application
   • Language: Swift
2. Under project General settings, add ReactKit to Linked Framework and Libraries
   • + > Add Other... and choose /path/to/react-native/ReactKit/ReactKit.xcodeproj
3. Now ReactKit would have been imported. Link it by choosing it from the list.
   • + > lib.ReactKit.a
4. Under project Build Settings,
   • Linking > Other Linker Flags : Add -all_load
   • Search Paths > Header Search Paths:
     • Add /path/to/react-native
     • Enable recursive
   • Swift Compiler - Code Generation > Objective-C Bridging Header
     • Set to ProjectName/ProjectName-Bridging-Header.h
     • We will create this file in later part
5. Under project Info settings,
   • Remove property Main storyboard file base name
6. Delete file Main.storyboard from XCode and Confirm Remove Reference

Code

AppDelegate.swift

Use this as the function body for didFinishLaunchingWithOptions replacing

1. <AppFileName>.js - Your JS entry point where you'll register the Application.
2. <AppName> - The name you use in <AppFileName> in AppRegistry.registerComponent to register the application.

// initialize the rootView to fetch JS from the dev server
let rootView = RCTRootView()
rootView.scriptURL = NSURL(string: "http://localhost:8081/<AppFileName>.includeRequire.runModule.bundle")
rootView.moduleName = "<AppName>"

// 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

ViewController.swift

Add this override to ViewController if you don't want the top time-bar of ios to be visible in your Application.

override func prefersStatusBarHidden() -> Bool {
	return true
}

ProjectName-Briding-Header.h

This file imports react-native(Obj-C) classes to be used in your swift application. Create a header file named ProjectName-Bridging-Header.h (in the same directory as AppDelegate.swift) and paste the contents generated by the following script

find /path/to/react-native/ReactKit -name "*.h" | awk -F'/' '{print "#import \""$NF"\""}'

<AppFileName>.js

The bare minimum stuff

var React = require('react-native');
var App = module.exports = React.createClass({ render() { /* ... */ });
React.AppRegistry.registerComponent('<AppName>', () => App);

Getting started

Settings

• APPDIR = Directory which contains '<AppFileName>.js'
• NODE_MODULES_DIR = usually '$APPDIR/node_modules' if you use other libraries in your app

Starting the App

1. cd /path/to/react-native
2. ./packager/packager.sh --root $APPDIR --root $NODE_MODULES_DIR
   • Note: DONOT use $NODE_MODULES_DIR if you don't have any node_modules
3. Build the App from XCode and everything should work just fine.

This is great. Thanks for sharing. 👍

Can someone update this file? After following through with the instruction, I have the following red screen of death message: Unable to execute JS call: __fbBatchedBridge is undefined

Typo: "ProjectName-Briding-Header.h" should be "ProjectName-Bridging-Header.h"

Where can ReactKit be found?

Where can ReactKit be found? +1 @boopathi

@anddygon @boopathi https://github.com/ReactKit/ReactKit

where in my mac is "/path/to/react-native" ?

@boopathi Where is "/path/to/react-native"?

ReactKit has nothing to do with React Native!