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 and pod 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.