Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating a Swift-ReactNative project

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.
@BilalBudhani

This comment has been minimized.

Copy link

BilalBudhani commented Jan 6, 2016

This is great. Thanks for sharing. 👍

@tkfeng

This comment has been minimized.

Copy link

tkfeng commented Jan 9, 2016

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

@joshuapinter

This comment has been minimized.

Copy link

joshuapinter commented Mar 24, 2016

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

@ryanwalker

This comment has been minimized.

Copy link

ryanwalker commented Mar 1, 2017

Where can ReactKit be found?

@anddygon

This comment has been minimized.

Copy link

anddygon commented Apr 10, 2017

Where can ReactKit be found? +1 @boopathi

@mtyang

This comment has been minimized.

@aks5686

This comment has been minimized.

Copy link

aks5686 commented Oct 6, 2017

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

@jacobkrahn

This comment has been minimized.

Copy link

jacobkrahn commented Apr 11, 2019

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

@ios-dev-kindredgroup

This comment has been minimized.

Copy link

ios-dev-kindredgroup commented Nov 29, 2019

ReactKit has nothing to do with React Native!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.