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.
Related
I am new to react native. I uses the Cli version. I installed some packages e.g. react-navigation. After the installation I open the ios folder and run pod install. It works fine, but with react-native-vector-icons I have to link it manually like this: react-native link react-native-vector-icons. And I don't have to run pod install. But what if I want to install additional packages after that like sqlite? For this package i have to run pod install. Do I have to reinstall the vector icons after every other package installation? I am new to react-native and I don't now much about "pod install", "linking" and so on. So please give me a bit more details on how to work with adding new packages with this special task.
Many thanks
Jens
Since react-native 0.60 linking is no longer required since it is managed by react-native itself, remember that react-native is something like a "controller" in javascript that sends commands to native code in iOS and Android, pod install is the way you install the iOS native components required by your react-native libraries, something like npm install but for iOS.
react-native-vector-icons has its own iOS libraries, so it requires to run pod install(you should run a pod install everytime you add a new library, eventually you'll understand when you need to run it and when not). There's no harm in running several times pod install so don't worry about it. Also for react-native-vector-icons if I'm not mistaken, you also have to modify info.plist in order to have all the typographies available (This is the "hard" part about this library, it has additional typographies that should be embeded in your project)
I'm following this guide for adding AsyncStorage to my React Native app. I'm using react native v0.63.4, but I'm using a Mac, so I'm wondering whether the manual linking that they cite for MacOS at the bottom is something I have to do. For instance, in the manual linking guidelines it says to add a line for AsyncStorage in your podfile, and when I just did npm i... and pod install, there was no line added to my podfile. Do I have to do this manual linking?
You don't have to do the manual linking. Since the 0.60 version of React Native, it was released a feature called autolinking. That is, when you execute the npm install or yarn add the lib is linked already, the pod install is just to install dependencies behind the scenes, it does not have to be necessarily in the podfile.
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?
What is the purpose of the react-native link command?
Note: from React-Native 0.60.0 linking packages using react-native link has become redundant. Autolink has been added to the React-Native CLI which means that iOS will now use cocoapods and Android will use gradle. You can read more about Autolinking here.
What is react-native link?
react-native link is an automatic way for installing native dependencies. It is an alternative to manually linking the dependency in your project. It works for both Android and iOS.
When linking a project manually the majority of the steps are the same and so using react-native link allows you to install the native dependency with less fuss and without having to type similar code or perform similar actions repeatedly.
However, it should be noted that running react-native link will not always link a package fully, sometimes additional steps are required and you should check carefully with the installation instructions.
Always read the instructions carefully before installing a dependency and linking it.
iOS Considerations
If your project is using CocoaPods and the dependency that you are linking has a .podspec then when you use run react-native link it will update your Podfile. This is instead of adding the files directly to your Xcode project. You will also have to run pod install inside your ios directory otherwise the native dependency won't be fully installed.
Sometimes installing using CocoaPods can cause more issues, and not every dependency needs to be installed with CocoaPods you could always follow the steps that I outlined in this SO answer to stop react-native link adding a dependency to the Podfile, it is not ideal but it is a workaround. Some dependencies require additions to be made to the Podfile, so you should only do this if the dependency doesn't require pods to run.
react-native link or react-native link dependency-name
Should you just use react-native link when linking any dependency or should you be more explicit and use react-native link dependency-name?
From my experience it is better to use react-native link dependency-name. This is due to the fact that react-native link will try to link (or re-link) all the dependencies that can be linked and this can lead to code duplication. Most of the issues that I have experienced have been when the Android native dependency is being linked. I think there has been some headway in stopping this from happening in subsequent updates, but the old adage applies here once bitten, twice shy
Linking good practice
When using react-native link dependency-name you should follow good practice so that you don't get stung. Sometimes dependencies that you try don't work as expected and removing all the code that was added during the linking process can be tricky. (Xcode project files can be a nightmare to go through if you are unfamiliar with them).
This is how I install dependencies and then link them.
Make sure that you are using version control, like git.
Make sure your code is fully committed with no unsaved changes.
Create a new branch, and check it out.
Install your dependency npm i dependency-name
Then link you dependency react-native link dependency-name
Perform any additional installation steps that the dependency requires. See the installation instructions for the dependency.
Check that your code works with the new dependency.
commmit changes and merge the branch.
Manual Linking
If you prefer to link your native dependencies manually then you should either follow the instructions on the dependency's website or you can look at the documentation that react-native provides.
Currently there is only an explanation on how to manually link iOS projects.
Manually linking Android requires you to make changes in the following locations:
settings.gradle
app/build.gradle
MainApplication.java
As always for the exact changes that you should make you should look at the dependency's manual linking instructions.
Do I have to link?
It depends on the dependency that you are using some dependencies use only code written in Javascript, so it is not required to link them, and there is no benefit served by running react-native link dependency-name.
However, if the dependency contains native code then you will have to link. Either manually or by using react-native link dependency-name.
How can I tell if I need to link the dependency?
Firstly you need to check the website, the github repo, or the npmjs.com page for the dependency. There will usually be instructions there telling you whether to link the dependency after you have installed it.
If you cannot find any instructions about linking, you (probably) won't need to link it.
If you are still unsure, check with the dependency maintainer.
Can I just run link anyway?
Yes, you can it won't do anything if there is nothing to link. But always run it with react-native link dependency-name to avoid issues.
When do I run link?
You only run it after you have installed your dependency. I would recommend running it just after you have installed the dependency. You should then check to make sure that it works, before installing any new dependencies so that you can easily debug.
You shouldn't need to run it more than once per dependency.
It doesn't matter how many components or changes to the javascript code that you make it won't affect the linking, as the linking is purely native and components are javascript.
What is autolink?
Autolink is a new feature that is being added to the react-native-cli. You can read more about autolink here.
Autolink replaces react-native-link
Autolinking is a mechanism built into CLI that allows adding a
dependency with native components for React Native to be as simple as:
yarn add react-native-webview
Autolinking is a replacement for react-native link that brings new features (such as ability to easily integrate native dependencies on iOS) and fixes some of the long-standing issues.
Once it is fully implemented it should make adding dependencies with native-code to your project much easier.
Linking native library means that you are going to integrate already implemented module into your application or module which completes your react native's module functionality.
Steps to integrate lib(android):
1) Add package name to new packages() 2) Add dependencies to settings.gradle file and main application's gradle i.e app/gradle file. 3) sync the projects gradle because you made changes in the gradle and it's done.
All manual steps like below you have to perform
1) Go to your project's home dir using cmd.
2) run npm install
3) Thereafter run rnpm link or react-native link
4) see ios folder in your project folder and if you find any pod file then run pod install after navigating into ios folder in cmd.
now instead,
1) Go to your project's home dir using cmd.
2) run npm install
3) Thereafter run rnpm link or react-native link
4) see ios folder in your project folder and if you find any pod file then run pod install after navigating into ios folder in cmd.
When you've installed a library with native content(android or ios) then you need to require linking to the component react-native library.
like this
react-native link react-native-sound-player
When you installed any third party library with native content,you have to link the dependencies in android and ios. react-native link is responsible for including the dependencies in gradlew and pod files.
for suppose you installed react-native-vector-icons package then you have to link in your gradlew files. the new version of react native 0.60 has auto linking.
npm install react-native-vector-icons
react-native link react-native-vector-icons
Thanks for asking this question
if you are working with fonts
react-native link is used for linking the fonts and assets to project
link command is also for linking the libraries to react-native
But now React-native too better so there is no need to link the library
we can use
pos install
npx jetify
it will automatically link the libraries
react-native link is an automatic way for installing native dependencies. It is an alternative to manually linking the dependency in your project. It works for both Android and iOS
In the installation instructions for iOS, it says to run
react-native link
After completion I see:
However, compiling immediately fails with the error React/RCTViewManager.h not found:
When looking at the integration instructions on Facebook's website, it has us using a Podfile. When you use a Podfile, your project looks like this:
Comparing this to the react native sample project, I can see that in fact, it does not appear to use a Podfile to integrate react native at all; instead all React components are included as libraries:
Thus, I suspect that the integration instructions for react-native-video are not compatible with the integration instructions found here.
Can anyone suggest how to integrate react-native-video when using Podfiles to integrate react-native?
What version of react native are you using? This looks like it's due to the breaking change for RN version >0.40.
The short fix for this issue is if you see #import React/$(filename) in the native code, replace it with #import "$(filename)", but if you can update to RN >0.40 that would be preferable.
To answer your question about pods, you should be able to add something like pod 'react-native-video', :path => '../node_modules/react-native-video' to your podfile and run pod install (if the relative path from your Podfile to the library root is incorrect replace it with the correct one). Looking at the github page for react-native-video, it does have a podspec so it probably supports cocoapods installation