【React Native】「react-native-linear-gradient」ライブラリを使ってグラデーションを実装する

React Native でグラデーションを実装する方法についてです。
最初は CSS での実装と同じかと思っていたのですが、React Native の StyleSheet はグラデーションに対応していないとのこと。
そのため「react-native-linear-gradient」というライブラリを導入しました。

GitHub のページはこちら。

GitHub – react-native-linear-gradient/react-native-linear-gradient: A component for react-native
https://github.com/react-native-linear-gradient/react-native-linear-gradient

まず、下記コマンドでライブラリをインストールします。

npm install react-native-linear-gradient --save

// iOS の場合は下記も実行する
npx pod-install

上記が完了したら、次にグラデーションを追加したいページで下記をインポートします。

import LinearGradient from 'react-native-linear-gradient';

最後に、下記を追加すればOKです。

<LinearGradient 
  colors={['#a0d8ef', '#7ebeab']} 
  start={{x: 0.0, y: 0.0}} 
  end={{x: 1, y: 1}}
  style={{ flex: 1 }}>
  ......
</LinearGradient>

上記のサンプルコードだと、画面左上が水色で、右下に行くにしたがって薄い緑色になっていきます。

なお、使用する色は 2色以上指定することができ、また locations を使えばそれぞれの色の開始位置を指定することもできます。
locations は上記のサンプルコードでは使用していないため、詳しくは GitHub のページをご参照ください。

更に、start と end の値を変更すれば、上から下、または左から右へのグラデーションを描くこともできます。
色々値を変えて、実際に試してみると良さそうですね。

以上、React Native のライブラリ「react-native-linear-gradient」を使ってグラデーション実装する方法についてでした。
ご参考になれば幸いです。