React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Our first React Native implementation is ReactKit, targeting iOS. We are also working on an Android implementation which we will release later. ReactKit apps are built using the React JS framework, and render directly to native UIKit elements using a fully asynchronous architecture. There is no browser and no HTML. We have picked what we think is the best set of features from these and other technologies to build what we hope to become the best product development framework available, with an emphasis on iteration speed, developer delight, continuity of technology, and absolutely beautiful and fast products with no compromises in quality or capability.

Requirements #

  1. OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
  2. New to Xcode? Download it from the Mac App Store.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. New to node or npm? brew install node
  5. We recommend installing watchman, otherwise you might hit a node file watching bug. brew install watchman
  6. If you want to use flow, brew install flow

Quick start #

Get up and running with our Movies sample app:

  1. Once you have the repo cloned and met all the requirements above, start the packager that will transform your JS code on-the-fly:

    npm install npm start
  2. Open the Examples/Movies/Movies.xcodeproj project in Xcode.
  3. Make sure the target is set to Movies and that you have an iOS simulator selected to run the app.
  4. Build and run the project with the Xcode run button.

You should now see the Movies app running on your iOS simulator. Congratulations! You've just successfully run your first React Native app.

Now try editing a JavaScript file and viewing your changes. Let's change the movie search placeholder text:

  1. Open the Examples/Movies/SearchScreen.js file in your favorite JavaScript editor.
  2. Look for the current search placeholder text and change it to "Search for an awesome movie...".
  3. Hit cmd+R (twice) in your iOS simulator to reload the app and see your change. If you don't immediately see your changes, try restarting your app within Xcode.

Feel free to browse the Movies sample files and customize various properties to get familiar with the codebase and React Native.

Also check out the UI Component Explorer for more sample code: Examples/UIExplorer/UIExplorer.xcodeproj. Make sure to close the Movies project first - Xcode will break if you have two projects open that reference the same library.

Troubleshooting #

  • Xcode will break if you have two examples open at the same time.
  • If npm start fails with log spew like:
    2015-02-02 10:56 node[24294] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
    then you've hit the node file watching bug - brew install watchman should fix the issue.
  • Jest testing does not yet work on node versions after 0.10.x.
  • You can verify the packager is working by loading the bundle in your browser and inspecting the contents.

Please report any other issues you encounter so we can fix them ASAP.

Next →