react-native로 그라데이션을 줄때 사용
react-native-linear-gradient 참고

Installaction

yarn add react-native-linear-gradient

Manual

Android

android/setting.gradlew

include ':react-native-linear-gradient
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

android/app/build.gradlew

dependencies {
    ...
    implementation project(':react-native-linear-gradient')
}

android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java

// ...

import com.BV.LinearGradient.LinearGradientPackage; // <--- This!

// ...

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new LinearGradientPackage() // <---- and This!
  );
}

Ios(with Cocoapods)

podfile

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

run pod install

이후 BVLinearGradient" was not found in the UIManager. 라는 에러메세지가 android emulater로 떠서 react-native run-android를 해줬더니 해결되었다.

Use

Props

color

['red','blue']

배열안에 두개 이상의 컬러값을 넣어준다.

start

{ x: number, y: number }

그라데이션이 시작하는 좌표 값
x,y값은 왼쪽 위의 모서리부터 시작

end

{ x: number, y: number }

그라데이션이 끝나는 좌표값

locations

[0.1,0.75,1]

color의 배열과 mapping되며 각 컬러의 stop지점을 배열에 담는다

Horizontal Gradient

<LinearGradient start={{x:0,y:0}} end={{x:1,y:0}}/>

Vertical Gradient

<LinearGradient start={{x:0,y:0}} end={{x:0,y:1}}/>

Transparent Gradient

rgba(0, 0, 0, 0) 과 같이 alpha channel이용