Skip to content

Instantly share code, notes, and snippets.

@jabez128
Forked from boopathi/README.md
Last active September 21, 2018 13:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jabez128/b37d0fbe818511701fc4 to your computer and use it in GitHub Desktop.
Save jabez128/b37d0fbe818511701fc4 to your computer and use it in GitHub Desktop.

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment