Step 1: npm install react-native-image-picker
......app is still building fine.....
Step 2: react-native link react-native-image picker
...app no longer compiles
When I clean gradle I get error:
"Could not set process working directory to 'C:\code\rn\xs\node_modules\react-native-image-picker\example\android': could not set current directory (errno 3)"
When I try to rebuild in gradle I also get error:
"Manifest merger failed : Attribute application#appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
Suggestion: add 'tools:replace="android:appComponentFactory"' to element at AndroidManifest.xml:6:5-117 to override".
So I take suggestion of error message and add 'tools:replace="android:appComponentFactory"' to application element.....
I now still get same error when I clean.....but error when I rebuild is a little different:
"tools:replace specified at line:10 for attribute android:appComponentFactory, but no new value specified.".
Please help!!
As addition for Lenoarod answer, you can use jetifier library. It will help you to convert all library that hasn't converted to AndroidX.
According to it's documentation
So now you need to convert your app to AndroidX, but many of your react-native libraries ship native Java code and have not updated. How is this done?
First, use Android Studio's refactoring tool to convert your app re: the Android developer docs
1. npm install --save-dev jetifier
2. npx jetify
3. npx react-native run-android (your app should correctly compile and work)
4. Call npx jetify run in the postinstall target of your package.json (Any time your dependencies update you have to jetify again)
your react-native version uses Androix library, but the react-native-image-picker which you installed used android.support.v4. So when you build the project, that error happens. there two ways for this solution Which I suggest.
the one solution is that you update your react-native-image-picker version. the new version supports the androix supported library. the following is the official
guide
To use this library you need to ensure you match up with the correct version of React Native you are using. the flowing is the [official guide][1].
p.s. React Native introduced AndroidX support in 0.60, which is a breaking change for most libraries (incl. this one) using native Android functionality.
If you have to use the old version, you can modify the react-native-image-picker related files. for example the ImagePickerModule,ImageConfig. they locate in android/src/main folder
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.annotation.StyleRes;
import android.support.v4.app.ActivityCompat;
import android.support.v7.app.AlertDialog;
Thanks both.
lzzuddiin's answer was closest....all I needed to do was "Refactor > Migrate to AndroidX" from the menu bar; that alone solved the issue
Related
When I install the sendbird SDK into a expo managed react native project I get the following error:
The package at "node_modules/sendbird/SendBird.min.js" attempted to import the Node standard library module "fs". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq/#can-i-use-nodejs-packages-with-expo
However fs is a node package which isn't the environment run by react native. I've looked through the Sendbird examples, and have used this very same SDK in other apps. What am I doing wrong with this one?
SendBird here! Our apologies, but there is a known issue in JavaScript version 3.0.119 that is causing it. This will be fixed in the next version, coming very soon! In the meantime, please build with version 3.0.118 as needed.
If you are using npm, you can run this command:
npm install --save sendbird#3.0.118
I would like to know if it's necessary to rebuild react native project after installing and linking libraries that includes native codes.
Yes, as react-native-link updates some native files that are under the ios/android folder, that won't be checked during a reload/hot-reload/live-reload. All those files aren't checked in your jsBundle and are compiled during a run-android or run-ios.
Of course, if you added a new dependecy to the project and linked it, and you haven't used it anywhere in your code yet, you don't need it. If you are using that dependecy, your project instance will, most likely, die.
if your react native version is below 0.60 then you have to run react-native-link after you install any react-native module. However after react-native version 0.60 and above, this is done automatically using the new "autolinking" feature added.
Read the changelog here:
https://facebook.github.io/react-native/blog/2019/07/03/version-60
However you still need to rebuild your project after you install a native module but you dont need to run the react-native-link command anymore after installing every library after react-native#0.60 and above. Just type react-native run-android
In my cases when i link third party module in react native like..
npm install react-native-vector-icons --save.
react-native link
It gives message for me....
React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:-
react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")
but if i am not link the module it will not work for me
this problem occurs only in react-native new upgraded version(0.60) not for older version.
please suggest me any solution for the given problem.
Always make sure to install any third party library manually rather than doing react-native link.
Follow the detailed manual installation https://github.com/oblador/react-native-vector-icons from here.
Firstly run this command react-native unlink react-native-vector-icons
After unlink is successful, follow the manual installation steps.
Also it's better to use yarn (https://yarnpkg.com/en/) over npm while installing a package.
Hope this helps!
Since react native 0.60 auto-linking is avaliable so that means that future libraries release won't need to run the "link" command. If you're using vector-icons you'll need to wait until the upgrade. You can use the vector icons linked to you project normally, but be careful because that will not be compatible in the next major release in react native. I also tried to upgrade to react native 0.60.3, but this is not the great idea if your using a lot of dependencies.
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
I'm new to React-Native and I'm trying to figure out how to run the project on iOS. I know this error means I need to add the library .xcodeproj to XCode, but where is this file located? I'm using react-navigation and I installed it with yarn and after I have run the command react-native link
Thanks for your help!
Seems like you have a previous installation of react-native-navigation, which uses native code.
First you need to unlink this library:
react-native unlink react-native-navigation
Note: You need to have the source code of the react-native-navigation package in order to unlink. If you already removed from you package.json, you need to install again to unlink.
After unlink, you can remove the react-native-navigation and just move forward using the react-navigation library, which does not need to link native code.
Just to add to #Rafael's answer, I previously added React-Native-Navigation and yes it was still linked in the Link Binaries With Libraries, so I deleted it, here's a picture showing which library to remove
For those who are using react-native-navigation and still got this issue consider
updating IOS Target Deployment to version 11 in Xcode Build Settings
from
https://github.com/wix/react-native-navigation/issues/6734#issuecomment-720735261