Struggle to install react-native-linear-gradient
Tags: reactnative, cocoapods
Published: 2018-03-11 07:38:03

---
title: Struggle to install react-native-linear-gradient
published: true
description: 
tags: react-native, cocoapods
---

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`

```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.