Integrating React Native into an Existing Project

Introduction Does using React Native mean you have to rewrite your entire project from scratch? There are plenty of tutorials out there, but very few explain how to integrate RN into an existing project. I worked through it myself and am documenting the process here. This marks the beginning of my RN journey. One thing to keep in mind: RN iterates very quickly, and differences between versions can be significant — always pay attention to the version when troubleshooting. Integrating React Native The prerequisite is that the React Native environment is already set up. Create the Component Create a new directory called and inside it create a JS file named . Inside this directory, run: Version 0.40.0, released recently, has significant breaking changes, so we'll use 0.38.0 for now. To install a specific version: . For details, see: Upgrading. Initialize CocoaPods Using CocoaPods to manage third-party libraries is recommended, and it also makes integrating RN easier. Create a new project called , run in the project directory, and set up the Podfile as follows: The version available on CocoaPods is far behind the official release, which is why the official docs recommend referencing it from a local path. Run : Referencing RN in the Project The project UI looks like this: Create a class: In : Running at this point will produce an error: This is because the Node server hasn't been started yet. Starting the Server We need to start a server on port 8081 that packages into . Once that's running, our code can load it. Run this command from the project directory: 1. Assigns the full path of the directory to — must be an absolute path. 2. Changes into the directory. 3. Binding watches the folder, then launches the Node server. 4. Wrapping the three commands in prevents the terminal from ending up inside the directory after execution. Output: Visiting http://localhost:8081/index.ios.bundle in a browser works, but the simulator still throws an error. You need to enable HTTP support. Enabling HTTP Add the following to the project's : The next error: Update the Podfile to add the dependency, then run . Run the project again — the expected result appears: Tap : A few things still need to be investigated: 1. How to customize the server URL to load from. It should be possible to parameterize this, having the business server push down the bundle URL for the client to load. 2. How to differentiate between different bundles when different pages need to load different ones. Code All the code in this article can be found on my GitHub .