score:3

Accepted answer

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

score:4

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.

score:5

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

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

The next step is to install the cocoapods. enter image description here

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

enter image description here

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

enter image description here

Then your Podfile will just like this enter image description here

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 : )


Related Query

More Query from same tag