diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index ff179638871..b83737b6ade 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,6 +1,9 @@ Integrating with Existing Apps – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Integrating with Existing Apps

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.

Install React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.

pod 'React' pod 'React/RCTText' -# Add any subspecs you want to use in your project

Remember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.

Then install your pods:

$ pod install

Create Your React Native App #

There are two pieces you’ll need to set up:

  1. The root JavaScript file that will contain your actual React Native app and other components
  2. Wrapper Objective-C code that will load up your script and create a RCTRootView to display and manage your React Native components

First, create a directory for your app’s React code and create a simple index.ios.js file:

$ mkdir ReactComponent +# Add any subspecs you want to use in your project

Remember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.

Then install your pods:

$ pod install

If you are installing React Native locally via npm then you will end up with duplicate local React Native installations as both Cocoapods and npm creates a local install of React Native. This can result in issues when trying to bundle your code as the packager will find duplicate modules and throw an error.

To resolve this issue have your Podfile reference the React Native installation from npm's node_modules folder. Also be sure to include all subspecs that you want to have installed.

pod 'React', :path => './node_modules/react-native', + :subspecs => [ + 'RCTText' + ]

Create Your React Native App #

There are two pieces you’ll need to set up:

  1. The root JavaScript file that will contain your actual React Native app and other components
  2. Wrapper Objective-C code that will load up your script and create a RCTRootView to display and manage your React Native components

First, create a directory for your app’s React code and create a simple index.ios.js file:

$ mkdir ReactComponent $ touch ReactComponent/index.ios.js

Copy & paste following starter code for index.ios.js – it’s a barebones React Native app:

'use strict'; var React = require('react-native');