Adding React Native to Existing iOS Project Without CocoaPods

For any number of reasons, you may find yourself wanting to add React Native to an existing iOS project without using CocoaPods. CocoaPods is a tool to automate the process of adding third party libraries to your project but there is no reason why you cannot do this manually if circumstances demand it.

N.B this assumes you have React Native downloaded as dependency within a node_modules folder located within your native repository.

For an example of how to add React Native as a dependency to a project look no further than any project created with react-native init or the UIExplorer project as included in the Examples directory of the react-native Github repository.

Adding React Native’s sub-projects to your own project

A newly created React Native project includes the following sub-projects by default. I would recommend that you create a group within your project in which to add these sub-projects to in Xcode, right-click it, and select ‘Add files to YOUR_PROJECT_NAME’. You may then add the React project itself (located in node_modules/react-native/React) and all the other React Native sub-projects (located in node_modules/react-native/libraries).

Figure 1: the ‘Libraries’ group and the location of React.xcodeproj

Figure 2: the location of the ‘other’ React Native sub-projects

Link Binary with Libraries

For our project to compile, we must link our project target(s) with the 3rd-party React Native libraries; in this case our project target is ‘UIExplorer’. N.B. any target in which you are using a class located in any of the React Native sub-projects, the respected libraries must be linked with the target in question.

Navigate to Build-phases -> Link Binary With Libraries add the following libraries. N.B. that the libraries are statically linked in this case.

Figure 3: Link Binary Wth Libraries

‘Other Linker Flags’

If you do not have the following linker flags set already, it will be necessary to add them to compile React-Native in your project.

Figure 4: Other Linker Flags

Header search paths

If you are using a version of React Native below 0.40 it is necessary to add some additional header search paths to your project. From 0.40 this is not necessary due to a ‘copy headers’ phase being added to the React Native project; these headers can be included with system includes (<>’s) as the headers themselves will be located along with other system headers in a specific directory.

In the instance you are using a version of React-Native below 0.40, you will need to add the following to your project’s header search paths; this tells the compiler where it may find the React Native header files. N.B. that the paths you add should be relative to your node_modules directory.

Figure 5: Header Search Paths

I hope information has been useful. It’s probably clear now, if it was not already, why tools such as CocoaPods exist to automate this process, given its tedious nature.

Any questions, feel free to ask and I will do my best to help.