I'm using React Native 0.61, and have been reading about the new auto-linking feature. If you have any insight on ANY of the following questions, I'd appreciate it.
My Questions Are:
1) My understanding of react-native link <module> is that it adds a line for <module> to your Podfile, and then you run pod install. However, for the last year I've been using react-native link and linking manually, and have never run pod install. So am I right that react-native link does more than just add lines to your Podfile?
2) In the past, when react-native link failed to link the module, I manually linked it by dragging the .xcodeproj and .a files into Xcode as described here. Does react-native link (when it works) add the line to your Podfile AND add .xcodeproj and .a files into Xcode for you?
3) Is there anything involved in native modules being linked other than the .xcodeproj and .a files being added to Xcode?
4) What exactly does pod install do? Does it take all the native modules referenced in your Podfile and add .xcodeproj and .a files into Xcode? If so, that would involve two steps: adding the line to your Podfile and then running pod install. Why not just react-native link?
5) My understanding of auto-linking is that it adds lines for all native modules to your Podfile, and then you still have to run pod install. Isn't this just accomplishing the same thing as react-native link?
6) In this guide to auto-linking, it says "Autolinking is a replacement for react-native link. If you have been using React Native before version 0.60, please unlink native dependencies if you have any from a previous install.". Why does it tell you to unlink? If the module is already linked, what will unlinking it and re-linking it do? This implies there's a difference between the way modules are linked with react-native link and via auto-linking. What happens if you auto-link and then pod install, and then try using react-native link, or vice versa?
7) I outlined this in the previous questions, but just to make it concise, what is the difference between auto-linking + pod install and react-native link?
All of your questions are closely intertwined so I'm going to just give you the details that will hopefully clear up things for you.
If React Native version <= 0.59 AND Cocoapods is NOT used in
the project :
react-native link will just add the .xcodeproj file and the .a file to the XCode Project. It will NOT add any lines to the Podfile because in this case, the Podfile doesn't exist.
If React Native version <= 0.59 AND Cocoapods is used in the
project :
react-native link will add the lines to the Podfile and install pods. It will NOT add .xcodeproj or .a file to the XCode Project. This is assuming that the library supports Cocoapods installation. How do you know if the library supports Podfile installation ? They mention it on their Github page/NPM page. Also, such libraries will have a .podspec file as well.
Example : https://github.com/react-native-community/react-native-device-info
See that this library has a .podspec file -> RNDeviceInfo.podspec. So this supports Cocoapods installation.
If the library doesn't support Cocoapods installation, react-native link will just add xcode.proj and .a file to the XCode Project like the above case.
If React Native version >= 0.61 (Cocoapods is default in this case)
react-native link is NOT required anymore.
You just install the library (yarn add or npm install)
And then do pod install.
What happens here is, Cocoapods grabs the library from the node_modules folder, checks if there is a .podspec file and then installs the pods. But it DOESN'T add any lines to the podfile. This is auto-linking that's been introduced in React Native version 0.60.
In case of older libraries that DO NOT have a .podspec file, you need to manually link the library by react-native link.
Related
The project I am working on currently uses pnpm as the package manager, I tried to install the react-boostrap library package in the project (pnpm i react-bootstrap) but this did not work. I also checked the node_module folder and there is a file of react-boostrap but it is not working.
i already search on internet but didn't get proper solution, so i tried this command pnpm i react-boostrap but didn't work.
remember i am using vite as front end tool.
pnpm 7.17.1
react 8.15.0
vite 8.15.0
You probably forgot to include css. You have to do it manually:
https://react-bootstrap.github.io/getting-started/introduction#stylesheets
I'm using yarn to develop local lib for React. because you can't run 2 versions of React I'm usually doing npm link ..\node_modules\react in the test project to use the same react version as my linked package.
but I don't want to use npm, so I tried yarn link ..\node_modules\react which does not work, and also the docs does not mention an option to do so.
I need to cd ..\node_modules\react and then yarn link then I could do yarn link react - but wants to avoid it, because who knows how many projects will need different versions of React.
so, there is a way to yarn link a directory that includes package.json file(yarn link <relative-path>)?
I'm using React Native 0.60.5 and am linking this module. It says that for React Native 0.60+, "CLI autolink feature links the module while building the app", so all we need to run is yarn add #react-native-community/async-storage.
However, on the main page describing autolinking it says that we need to run:
yarn add #react-native-community/async-storage
cd ios && pod install && cd ..
What I Want To Know:
Do we have to run pod install for all native modules with React Native 0.60+?
There are 2 types of linking in react-native
1 ) Manual linking
2 ) Pod linking
As described in official site
"If your iOS project is using CocoaPods (contains Podfile) and linked library has "podspec file", then react-native link will link library using Podfile."
Now when you
react-native link
If you project has CocoaPods (contains Podfile) and linked library has podspec file then it will add pod path of linked library in podfile like this
pod 'RNImageCropPicker', :path => '../node_modules/#react-native-community/async-storage'
But you still have to run pod install command
If project does not have pod file or linked library does not have podspec file then you have to do manual linking as described in site
Now coming to question from react-native 0.60 this process is now automatic. You do not have to run "react-native link " . It will automatically do pod work for you when you install library using npm/yarn but still you have to run "pod install" command
I have this project, was created with the latest version of expo and typescript, (I chose it from the cli).
Everything works well, also I added it with the expo-yarn-workspaces package, but I have this error when I try to scan the QR code with my android phone:
In packages/app you can find the react-native code...
I haven't added any logic to this app, it's only the default template that expo-cli creates.
This problem was a serious headache. Fortunately, I think I've got the fix for you.
Check the node_modules folder of your mobile application and ensure expo and react-native are both symlinked to the workspace-root's versions of these packages. In my case, the mobile application had a second copy of react-native rather than being symlinked, which was the cause of my trouble.
Edit - More clarity:
TL:DR If your react-native and expo folders inside of your mobile app's node_modules folder are not symlinked, delete them and rerun the expo-yarn-workspaces postinstall from the folder for your mobile app, NOT from the project root. These modules should only appear in the top level node_modules folder.
Example Project structure
/MyRoot
/node_modules
/react-native
/expo
/packages
/YourMobileApp
/node_modules
/react-native -- This should be a symlink to /MyRoot/node_modules/react-native
/expo -- This should be a symlink to /MyRoot/node_modules/expo
/SomePackage
/SomeOtherPackage
Example of what properly symlinked folders look like (Windows 7)
I am just trying to link react-native-fetch-blob library but it is giving error
react-native link react-native-fetch-blob
And error shows
Scanning folders for symlinks in ...\node_modules (48ms)
rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure this is a React Native project?
Cannot read property '_text' of undefined
I have already installed library using npm install react-native-fetch-blob --save but while linking it is showing error.
Not only for fetch-blob, linking is not working for any of the library.
Ensure you are at the root of the React Native project before running react-native link react-native-fetch-blob.
My guess is that you may currently be within the ios or android folder, so jump back up one directory level.
If you npm installed any packages in your current directory, you will need to remove them, then install them again from the root of the project to ensure they are installed in the right location.