Environment info
"react": "17.0.2",
"react-native": "0.66.3"
"react-native-maps": "^0.29.4"
XCode Version 13.1 (13A1030d)
macOS 12.0.1
Target Platform iOS 15.1 Phone using GoogleMaps
Steps to reproduce
Create new project
Add config = use_native_modules! in the Podfile
Add in the Podfile:
react-native-maps dependencies
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
pod install
Add in AppDelegate.m:
#import "AppDelegate.h"
#import <GoogleMaps/GoogleMaps.h>
#import <GooglePlaces/GooglePlaces.h>
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary
*)launchOptions
{
[GMSServices provideAPIKey:#"xxxx"];
[GMSPlacesClient provideAPIKey:#"xxxx"];
}
Build in XCode
Describe what you expected to happen:
Build successful
Describe what you actually happens:
/ios/UbiWalkerReactNat/AppDelegate.m:2:9: 'GoogleMaps/GoogleMaps.h' file not found
you need to first import import <GoogleMaps/GoogleMaps.h> in AppDelegate.m see here.
Seems to be solved, there was a WARNING on pod install:
[!] The xxx [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-xxx-xxx/Pods-xxx-xxx.debug.xcconfig'. This can lead to problems with the CocoaPods installation - Use the $(inherited)` flag, or
Remove the build settings from the target.
I've SOLVED with $(inherited) flag on Build Settings.
I am using react-native-intercom to manage Intercom in my app. I have installed the Intercom iOS SDK using CocoaPods, and linked the react-native-intercom. But Build failed with error Use of undeclared identifier 'Intercom' in AppDelegate.m - react-native-intercom
steps 1 (Install and Link Intercom)
npm install react-native-intercom
react-native link react-native-intercom
step 2 (Import Intercom in AppDelegate.m)
#import "Intercom/intercom.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[Intercom setApiKey:#"myApiKey" forAppId:#"myAppId"];
[Intercom registerUnidentifiedUser];
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
[Intercom setDeviceToken:deviceToken];
}
I am using react-native and fixed this issue by changing intercom into Intercom.
#import "Intercom/Intercom.h"
use #import "Intercom/Intercom.h" instead of #import "Intercom/intercom.h" in AppDelegate.m file
If you go into the framework's Headers folder in your workspace (Workspace -> Intercom.framework -> Headers) you will see the Intercom.h file.
I started a new react native application using :
react-native init myApplication
I started with splash screen so i used this library react native spalsh screen
I linked the library to generate native code using this command :
react-native link react-native-splash-screen
And i added files using Xcode like this :
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-splash-screen and add SplashScreen.xcodeproj
In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project's Build Phases ➜ Link Binary With Libraries
To fix 'RNSplashScreen.h' file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add: $(SRCROOT)/../node_modules/react-native-splash-screen/ios
I build the app using Xcode in a real Iphone and i get this error in RNSplashScreen.h :
/**
* SplashScreen
* 启动屏
* from：http://www.devio.org
* Author:CrazyCodeBoy
* GitHub:https://github.com/crazycodeboy
* Email:crazycodeboy#gmail.com
*/
#import <React/RCTBridgeModule.h> // <------'React/RCTBridgeModule.h' file not found
#import <UIKit/UIKit.h>
#interface RNSplashScreen : NSObject<RCTBridgeModule>
+ (void)showSplash:(NSString*)splashScreen inRootView:(UIView*)rootView;
+ (void)show;
+ (void)hide;
#end
'React/RCTBridgeModule.h' file not found
the Podfile :
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
...... # other libaries
pod 'react-native-splash-screen', :path => '../node_modules/react-
native-splash-screen'
AppDelegate.m :
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
.... <------- other code
[RNSplashScreen show];
return YES;
}
Instead of
#import <React/RCTBridgeModule.h>
use
#import "RCTBridgeModule.h"
Hope this helps you. Feel free for doubts.
I'm trying to implement a share extension with a firebase-based app. So I have created a pod file and generated a .xcworkspace project.
I'm using [react-native-share-extension][1]. Followed all installation tutorial and all seem ok, but when I try to launch the extension Xcode console says:
RNFirebase core module was not found natively on iOS, ensure you have correctly included the RNFirebase pod in your projects 'Podfile' and have run 'pod install'.
This is my pod file:
target 'Together' do
# Pods for Together
pod 'Firebase/Core'
pod 'Firebase/Auth'
pod 'Firebase/Firestore'
pod 'Firebase/Messaging'
pod 'Firebase/Storage'
pod "QBImagePickerController"
end
target 'TogetherShareEx' do
# Pods for TogetherShareEx
pod 'Firebase/Core'
pod 'Firebase/Auth'
pod 'Firebase/Firestore'
pod 'Firebase/Storage'
end
And this my TogetherShareEx.m:
#import <Foundation/Foundation.h>
#import "ReactNativeShareExtension.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <React/RCTLog.h>
#import <Firebase.h>
#interface TogetherShareEx : ReactNativeShareExtension
#end
#implementation TogetherShareEx
RCT_EXPORT_MODULE();
- (UIView*) shareView {
NSURL *jsCodeLocation;
[FIRApp configure];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"TogetherShareEx"
initialProperties:nil
launchOptions:nil];
rootView.backgroundColor = nil;
return rootView;
}
#end
I have also added these:
added '$(inherited)' in Other Linker Flags
added '$(SRCROOT)/../node_modules/react-native-firebase/ios/RNFirebase' in Header Search Paths
The result is that extension is created but when I try to share something, nothing happens. On Debugging the extension with Xcode the log shows the error shown above.
Any idea? Thanks
I was able to get this working after following the standard installation instructions, make sure you do the following:
Link libRNFirebase.a in your Extension's Build Phases. Also, make sure that libPods-{YOUR_EXTENSION_NAME}.a is linked as well.
Set the GoogleService-Info.plist target for both your main app
and your share extension in the right panel.
In your share extension's Build Settings > Other Linker Flags,
make sure you add $(inherited)
In your Share Extension .m file, make sure you import
Firebase and configure it there as well!
For more info, see the following GitHub thread: https://github.com/alinz/react-native-share-extension/issues/79
I have dug through a number of posts trying to set up a react native project using cocoapods for native ios libraries but I inevitably end up with an error for a missing file in #import <React/RCTBundleURLProvider.h> statement in my AppDelegate.m file.
What is the proper way to use cocoa pods with react-native? At the time of this post my current version of RN is 0.43.4 and I'm using Xcode 8.2.1.
This was my process, curious where I might be going 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 that project
3) I add a dependency in my podFile and run pod install
4) The install process succeeds, but I see a warning that my targets override the 'OTHER_LDFLAGS' and it's suggested I use $(inherit) in my linker flags in Xcode.
5) So based on this SO post I add $(inherited) to Project> TestProject > BuildSettings > linking> Other Linker Flags which was otherwise empty. I also checked and saw that $(inherited) was already present in Targets > TestProject> Build Settings> Linking> Other Linker Flags and PreProcessor Macros as well.
6) At this point I see React/RCTBundleURLProvider.h file not found error on the #import <React/RCTBundleURLProvider.h> statement in AppDelegate.m
7) Based on this SO post I try deleting the node modules directory and back in the terminal run npm install and when complete 'react-native upgrade'. When it asks me if I want to replace AppDelegate.m and project.pbxproj files I say yes.
8) Back in xCode I clean my build but still have the error from step 6 importing <React/RCTBundleURLProvider.h>
I just make whole process with start from clean Xcode project. Usually I simple create RN application, eject and then translate to cocoapods ios part.
It largely based on RN docs: http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html
So environment: macOS Sierra, Xcode 9.2, RN 0.51.0
Project name: MyApp
Prepare
Create new Xcode project, from 'Single View App' template, product name "MyApp", language Objective-C
Run, see it works
cd MyApp, mkdir ios, mv MyApp* ios (move all ios related files to ios subfolder)
Install npm dependencies
Create package.json in root folder of you project (very basic)
{
"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
Seup cocoapods
cd ios
pod init (generate Podfile)
declare react dependencies in Podfile in 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 subspecs to include/remove RN functionality, this is hard process because RN components not fully independant.
pod install (integrate pods into project, will create MyApp.xcworkspace, it should be used to compile application)
open MyApp.xcworkspace, build & run, app should still work
Embed RN Root View
Replace you AppDelegate.m 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 be unable to connect to packager server with http)
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
Compile & run in Simulator, you should see red screen with message "No bundle URL present." (it is because no packager server running & no compiled jsbundle exists)
Javascript part
Create MyApp/index.js with this code (it is from 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 root project folder (MyApp)
run app from xcode, you should see loading indicator and then RN rendered screen with "Welcome to React Native!"
Packager
You also should add packager build step to embed compiled js to app bundle main.jsbundle so it can be run without packager dev server.
Add script step to MyApp target's Build phases with this content:
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
This steps works for me.