React Native Firebase starter and React Navigation - react-native

I want to use the react native firebase starter template and add react navigation.
I have got the react-native-firebase-starter project up and running and have linked it to firebase. But now when I follow the steps to add react-navigation I come into problems with react-native link react-native-gesture-handler.
I guessed because the project uses cocoa pods and this command adds a line to the Podfile, that I should cd ios and run pod install.
The problem then is that I get an error: [!] React has been deprecated and the project won't build.
Has anyone successfully used this starter project and added react-navigation to it?
Please tell me what I'm doing wrong or what to do to get it sorted.

I figured this out.
You need to add these lines into your app target in the Podfile...
pod 'React', :path => '../node_modules/react-native'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
And then at the very bottom of the Podfile you need to add the following...
post_install do |installer|
installer.pods_project.targets.each do |target|
targets_to_ignore = %w(React yoga)
if targets_to_ignore.include? target.name
target.remove_from_project
end
end
end
This removes React & Yoga from the Pods project, as it is already included in the main project.

Related

How to install a pod in a custom react native library?

I'm trying to link a custom react native library which has a pod installed. When I install the pod in the custom library, xcworkspace is generated and I need to use the workspace there after, and I'm able to access the pods there. But, this custom library is linked as a xcodeproj to the ios project. So, it is unable to recognize the pod headers when it is linked.
Is there a way to link this custom library which has pods installed?

How to properly include 'Firebase/Auth' pod for iOS or react-native project?

Goal: In a react-native project, I'm using react-native-firebase v5.6 and because im using Firebase's authentication, I need to include "Firebase/Auth" in the pod file so react-native-firebase's bindings can use it.
Problem: Once pod "Firebase/Auth" is added and saved to podfile, and pod install is successfully run, the project build fails when compiling RNFirebaseAuth.m. I haven't added any auth related code, just simply installed the pod and clean&ran build. Sidenote, other react-native-firebase setup/integration has been successful to this point.
Failing Error:
/path/to/project/node_modules/react-native-firebase/ios/RNFirebase/auth/RNFirebaseAuth.m:1184:36: error: no known class method for selector 'credentialWithProviderID:IDToken:rawNonce:'
credential = [FIROAuthProvider credentialWithProviderID:#"apple.com" IDToken:authToken rawNonce:authTokenSecret];
Have I just missed an installation step or what? How do I fix build?
According to mikehardy on GitHub, react-native-firebase v5.6 has a minor breaking change that enforces the use of firebase pods with at least version 6.13.
I ran pod update and that was all that was needed to fix the build

Linking API on React Native 0.61: openUrl is not a function

I'm trying to make sense of the Docs for the enabling the Linking API in React Native 0.61.5 on iOS.
https://facebook.github.io/react-native/docs/linking
The docs say that the library needs to be manually linked by following these steps:
https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking
But there's no .xcodeproj for Linking, under node_modules/react-native/Library/Linking or node_modules/react-native/Library/LinkingIOS, thus I have not manually linked the Library. Are there alternative instructions on manually linking the library?
When I try to call Linking.openUrl from my App right now, I get the following error:
TypeError: _reactNative.Linking.openUrl is not a function.
also, in my Podfile, I see this line:
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
Any help is greatly appreciated!
In case anyone is as unobservant as I am, it's openURL, not openUrl.
Just lost an hour on this.
For 0.60+, you don't need to do the manual-linking stuff. It uses cocoapods to do the linkings automatically.
Install Cocoapods: sudo gem install cocoapods
Then just go to /ios folder and do a pod install

react-native link and installing native dependencies

I'm building a React Native module which itself has native iOS dependencies, that I don't own.
It's unclear to me how I can refer to and get installed these third-party deps though without making the user just go through Cocoapods directly instead.
i.e. With them having to create a Podfile then add the dependencies to the Podfile and doing pod install
In which case, why use react-native link at all?
So an example project is structured like this:
SomeApp
/iOS
SomeApp.xcodeproj
Podfile
/node_modules
/my_module
/ios
my_module.xcodeproj
my_module.podspec
my_module.h
my_module.h then has specified in it:
#import <SomeFramework/SomeFramework.h>
#import "RCTBridgeModule.h"
and my_module.podspec has
s.dependency 'SomeFramework', '~> 3.0'
react-native link will link my library but doesn't trigger the install of any dependencies, nor does it add any of those dependencies to the app Podfile.
According to what information I can find, react-native link does look for podspec files so it seems like it's only doing half the job?
Is there something I need to add to my_module/package.json to make react-native link add the dependencies to the main Podfile?
So the answer is that your podspec has to be in the top level of your node module folder.
If you nest your podspec within an iOS folder, react-native link will not find it and will not add it the app's Podfile automatically.

React Native app opens and closes quickly after installation on ios simulator

I've been developing an App using React Native and when I switched to a Mac environment to set up the configurations for ios, after all the setup has been done, the app opens very quickly and closes after the installation, showing that powered by react native screen. I noticed that in my packager screen, the line from the bundle which shows a progress of how much has been loaded does not appear, as if it has never been loaded. Same thing happens if I try to run the code from Xcode.
Here is the screen I'm talking about, for a test project I started for comparisson purposes:
And here is the same screen for my App, without the progress indicator being displayed:
I tried following some solutions provided by the comunity for similar issues but none of them worked. Note that no error message is displayed in my terminal window, as if the build and installation has been succesfull.
Can someone help me with this one? I've been strugling with this App for quite some time, as react native always seems to crash and display error messages for me. Any help would be much appreciated :)
Edit: forgot to mention that I'm trying to run the app on the simulator since I don't have an actual device.
Exactly this problem happened to me yesterday when I too installed react-native-firebase. I ran react-native run-ios and the app closed as soon as it opened without any specific errors.
I decided to run the app from Xcode, so I opened the Xcode project. To be more precise I opened the <Project>.xcworkspace because I installed CocoaPods. And there inside the logs I when trying to run the app I found the error. It said that the GoogleService-Info.plist was not found. And as I was looking through the Xcode workspace I did not see the file there, although it existed under /ios/<Project>/ in my IDE (VSCode). So maybe just a syncing problem.
So basically I added the file in Xcode as well, re-run and app was running fine.
Of course, I have no idea if I can find some sort of credible sources about this, but this exact issue happened to me under the exact same circumstances as yours.
Some solutions ...
If you are in latest react version then try to downgrade it.
Re-start your application and try to run again.
Delete node modules folder and run using npm install.
Try to open project using XCODE and build through it.
Most probably the problem is with your react version. Try to downgrade to stable react version and try
Check the log for errors, run react-native log-ios on the terminal and monitor it for errors.
or you can enable Debug JS Remotely option from the simulator by pressing command+D and check the console for errors.
Try to use adb logcat *:E, this will be helpful when you trying to find issues not related js.
I depends on the version of your react-native, if you are using its latest version , 0.56.0 (for now) it has a known issue, which you can see here, and it is suppose to be fixed in next version 0.57.0
https://github.com/facebook/react-native/issues/19953
although the issue raised for android version, but it has similar issue in ios
(the latest comment, provides more info about the error)
for now the possible fix is to downgrade to 0.55.4 or 0.55.0
if this couldn't solve your issue, Please provide more information about your app with adding package.json and build.gradle info to the question
Add firebase crashlytics or open again and again that app, so it navigates to the log screen to find the issue. Mainly it caused by the misconfigured pod settings. So please check your Podfile. because all the other errors are comes in app's internal error console. I'm attaching the Non error formed Podfile for your reference. It's only the example
Podfile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '12.0'
target 'iospodapp' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways.podspec"
pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse.podspec"
pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary.podspec"
pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary.podspec"
pod 'YogaKit'
pod 'Firebase/Performance'
pod 'Firebase/Messaging'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
pod 'react-native-orientation', :path => '../node_modules/react-native-orientation'
pod 'RNFS', :path => '../node_modules/react-native-fs'
target 'iospodappTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
flipper_post_install(installer)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
end
end
end
end
Note:
If you're using the firebase, don't forget to add the GoogleService-Info.plist into your ios directory through xcode.
If you're using firebase analytics that also makes the crash. because it needs too more configurations to avoid the crash. so check your build without firebase analytics first. If everything is fine, you can add the analytics later
If it occurs without any major changes
close Terminal, Emulator and any other application related.
clean the project
clean cache
npm start -- --reset-cache
clean and Install pod file
Cd IOS && podinstall
Rebuild the project.
I'm experiencing the same issue since yesterday, the app Im working on is old we are using "react": "16.8.3", "react-native": "^0.59.10", although the app used to work for me properly before, I cloned a fresh copy of the app from the github repo and it worked for the first time, then I again issued the same command npx react-native run-android and after installing the app should open while opening it starts to crash with no error, I see similar metro bundler screen as has been shared in the question. I tried to run the android folder via android studio I could see one issue which Im not able to resolve since yesterday
/node_modules/#react-native-community/netinfo/android/gradle.properties
(Operation not permitted)
which Im not able to figure out how to solve.