How to integrate React Native to existing iOS project

Question

Very excited to see Facebook open source React Native on F8 2015. Although they provide react-native-cli to generate an empty React Native project, I still don't know how to integrate React Native to my current project which uses Xcode workspace and CocoaPods.

Answer 1

You can checkout this demo: https://github.com/dsibiski/react-native-hybrid-app-examples

Before you start to use the react native, you should read their document flowing: http://facebook.github.io/react-native/docs/getting-started.html

then we should run npm install -g react-native-cli to install command line tool.

The next step is to install the cocoapods.

Then get into your Xcode project directory, create package.json file.The content is like this:

Then you run npm install in terminal.After a moment you will find a directory node_modules The next step is to run pod init .The Podfile will be created. So just open and configure it just like flowing

Then your Podfile will just like this

You should pay attention to the React path you have configured in Podfile.

Then run pod install. You'll get the workspace.

Also you need a server or offline bundle , checkout this

https://facebook.github.io/react-native/docs/running-on-device-ios.html

https://github.com/facebook/react-native/issues/240

Some problem you may have after that:

1.Naming collision detected:

https://github.com/facebook/react-native/issues/3440

2.Not available on ios(App Extension).....

Add code in Podfile

post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO' end end end

Hope it's helpful : )

Answer 2

React Native is available as a CocoaPod and distributed as part of React Native (inside node_modules installed via npm).

To integrate with an existing app is very easy, you just add an instance of RCTRootView wherever you like in your view hierarchy, and your React Native application will run inside it. See this guide.

Answer 3

A full step by step guide on how to get started with React Native in an existing project is here: https://facebook.github.io/react-native/docs/integration-with-existing-apps.html