I am not iOS engineer so installing react-native library was really hard.
I managed to install react-native-linear-gradient finally so write this article here to remember my struggle.
What is react-native-linear-gradient (rnlg)
An awesome library to create gradation component in React Native.
The api is clear, easy to use.
https://github.com/react-native-community/react-native-linear-gradient
But its installation process is really complicated. Every time Xcode creates lots of errors.
tl;dr
DO NOT USE CocoaPods
Instead, manually install it.
It looks obviously to use cocoapods. If you are web engineer, it is common to use package management system such as npm, yarn, composer, rubygem, pip, and so on.
But in React Native with Xcode projects, that common sense does not work. If you use CocoaPods, you will face Linker Error every time you build, fetch packages, pod install
, react-native run-ios
.
I don't know this problem is because of CocoaPods or ReactNative or react-native link
or Xcode.
(There is CocoaPods alternative named Carthage
so I will try it someday.)
Let's show how I struggled to install rnlg.
First round
First I used CocoaPods to install rnlg. Its Readme said we should do:
yarn add react-native-linear-gradient
react-native link
Oh it's quite simple. Just two commands we could add a library. Great.
I hit the commands and open MyProject.xcworkspace
with hope.
Then I faced this error:
Apple Match O Linker error
ld: Framework not found: BVLinearGradient
Second round
This might be because Xcode cannot recognize third party framework.
I tried a lot of things:
- Adding
Framework search paths
- in
Podfile
pod React, :path => '../node_modules/react-native/React'
pod yoga, :path => '../node_modules/react-native/ReactCommon/yoga'
- Clean build
- Delete
Pods
andpod install
again - Delete derived data
- delete
use_frameworks!
flag - add GCC settings
But I couldn't solve problems.
In this round, I searched google a lot and found many issues.
- https://github.com/facebook/react-native/issues/17556
- https://stackoverflow.com/questions/31226185/are-all-these-cocoapod-files-supposed-to-be-red-after-installing
- https://github.com/react-community/react-native-maps/issues/371
React Native is new and its development speed is very high. So solutions over half a year ago are not reliable today.
Third round
At this point, I noticed that CocoaPods might cause problems.
CocoaPods is really kind guy. It resolve dependencies, download source and stati binary, then link library with Xcode project.
But it does not set correct settings sometimes.
Also react-native link
links node_modules and Xcode automatically but sometimes the paths is not correct.
So in this round I decided not to use CocoaPods to install rnlg.
I read README again. IT contains procedure for manual installation.
I did the procedure and got this error:
Duplicate interface definition for class 'RCTView'
Thanks to this issue I fixed it. https://github.com/shoutem/ui/issues/134
Just replace
#import "RCTView.h"
with
#import <React/RCTView.h>
solved the problem and everything goes well.
It is bothering to modify import path manually after install packages, so I wrote a script to do this:
bin/post_install_hooks.sh
#!/bin/bash
find ./node_modules/react-native-linear-gradient/BVLinearGradient/ -type f \
| xargs perl -i -pe 's/"(RCT.+\.h)"/<React\/\1>/'
Conclusion
It is unstable to use libraries without much understanding. Someday it brakes your code.
Top comments (3)
Auto-linking is not flawless. You have to learn the tool you're using (CocoaPods).
Yes! Thanks.
Thank you for the comment!
Yes, I spent a lot of time to solve this problem due to lack of enough knowledge of my tools.