What is the correct way to use cocoapods with React Native (0.43.4) in ios?

Question

I dug through some messages trying to set up a response native project using cocoapods for the native ios libraries, but I inevitably get an error for the missing file in the #import <React/RCTBundleURLProvider.h> in my AppDelegate.m file.

What is the correct way to use cocoa pods with a-native response? At the time of this post, my current version of RN is 0.43.4, and I am using Xcode 8.2.1.

This was my process, curious where I could be wrong:

1) In the terminal, I create a new project using react-native init TestProject

2) I run pod init in the ios directory of this project

3) I add the dependency to my podFile and run pod install

4) The installation process completed successfully, but I see a warning that my goals are override the 'OTHER_LDFLAGS ', and suggested using $(inherit) in my linker flags in Xcode.

5) So, based on this SO post , I add $(inherited) in Project> TestProject> BuildSettings>, linking> Other linker flags that otherwise were empty. I also checked and saw that $(inherited) already present in Targets> TestProject> Build Settings> Linking> Other linker flags and PreProcessor macros.

6) At this moment, I see the React / RCTBundleURLProvider.h file not found in the #import <React/RCTBundleURLProvider.h> AppDelegate.m in AppDelegate.m

7) Based on this SO post , I am trying to remove the node modules directory and return to the end of the npm install terminal and after the completion of 'react-native upgrade' . When he asks me if I want to replace the AppDelegate.m and project.pbxproj files, I say yes.

8) Back to xCode I clear my assembly, but still have an error from step 6, importing <React/RCTBundleURLProvider.h>

Answer 1

I am just doing the whole process, starting with a clean Xcode project. Usually I just create an RN application, pop it, and then translate the ios cocoapods part. This is mainly based on RN docs: http://facebook.imtqy.com/react-native/docs/0.51/integration-with-existing-apps.html

So Wednesday: macOS Sierra, Xcode 9.2, RN 0.51.0

Project Name: MyApp

Cook

• Create a new Xcode project, from the "Single View App" template, product name "MyApp", Objective-C language
• Run, see how it works
• cd MyApp , mkdir ios , mv MyApp* ios (move all ios-related files to the ios subfolder)

Install npm dependencies

Create package.json in the project root folder (very simple)

 { "name": "MyApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "16.0.0", "react-native": "0.51.0" }, "devDependencies": { "babel-jest": "22.0.4", "babel-preset-react-native": "4.0.0" } } 

Run npm install

Kokoopodvoda for rest

• cd ios
• pod init (create subfile)
• declare dependent dependencies in a subfile in the MyApp target

 pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', 'RCTAnimation', 'RCTBlob', 'RCTText', 'RCTNetwork', 'RCTWebSocket', 'RCTImage', 'RCTLinkingIOS', 'DevSupport', ] pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 

You can add / remove React routines to enable / remove RN functions, this is a complex process because the RN components are not completely independent.

• pod install (integrate containers into the project, create MyApp.xcworkspace, it should be used to compile the application)
• open MyApp.xcworkspace , create and run, the application should work

Insert RN Root View

Replace the AppDelegate.m application with this snippet:

 #import "AppDelegate.h" #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> #if RCT_DEV #import <React/RCTDevLoadingView.h> #endif @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings]; NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions]; #if RCT_DEV [bridge moduleForClass:[RCTDevLoadingView class]]; #endif RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; return YES; } @end 

• Add ATS exception to Info.plist (or MyApp will not be able to connect to the packer server with http)

 <key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> 

• Compile and run in Simulator, you will see a red screen with the message "Missing package URL." (this is because the package server is not running and there is no compiled jsbundle)

Javascript Part

Create MyApp/index.js using this code (it is from the RN template):

 import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('MyApp', () => App); 

Create MyApp/App.js :

 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, }); 

• start packager npm start from the project root folder ( MyApp )
• run the application from xcode, you will see the download indicator, and then display the RN screen with "Welcome to React Native!"

Packer

• You should also add a collector build step to embed compiled js in the main.jsbundle application package so that it can run without a devager server.

Add a script step to the MyApp target. Generate steps with this content:

 export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh 

These steps work for me.