【React Native】「react-native-radial-gradient」ライブラリで円形グラデーションを実装する

以前、「【React Native】「react-native-linear-gradient」ライブラリを使ってグラデーションを実装する」という記事で、React Native でグラデーションを実装する方法について紹介しましたが、今回は円形のグラデーションを実装する方法についてです。

というのも、下記の記事で紹介しているようなガラスのような質感の立体的に見えるボタンを実装する際に、円形のグラデーションを描画しなければならなかったためです。

CSS3でPhotoshopで作ったようなキレイなガラス風ボタンを作るチュートリアル | Webロケッツマガジン
http://webrocketsmagazine.com/entry/20120131/css3-aqua-button-tutorial.html

ライブラリの GitHub はこちら。

surajitsarkar19/react-native-radial-gradient: Radial gradient library for react native
https://github.com/surajitsarkar19/react-native-radial-gradient

ライブラリのインストールは下記コマンドで行います。

npm install react-native-radial-gradient --save
// iOS の場合は下記も実行
npx pod-install

上記が完了したら、準備は完了です。
あとは、任意の場所でライブラリをインストールして実装してください。

import RadialGradient from 'react-native-radial-gradient';

<RadialGradient
  style={{ width: 200, height: 200 }}
  colors={['black', 'green', 'blue', 'red']}
  center={[100,100]}
  radius={200}
  stops={[0.1,0.4,0.3,0.75]}>
  ......
</RadialGradient>

上記は、GitHub に掲載されていたサンプルコードそのままです。
必須項目は colors で、1つ以上の色を配列形式で指定します。
なお、#2271b1 などの色コードや、rgba(34, 113, 177, 0.5) などの不透明度の指定を含む RGBA カラーモデルでもOKでした。

それ以外には、グラデーションの開始位置を指定できる center や、グラデーションの半径を指定できる radius や、色の開始・終了位置を指定できる stops があります。
これらは指定しなくても動作しますので、実装したいグラデーションによって調整してください。

なお、実装していて気がついたのですが、<RadialGradient /> の style に borederRadius を指定しても反映されないようでした。
そのため、描画したグラデーションの角を丸めたり、円形にしたい場合は、下記のサンプルコードのように <View> で囲んで、そちらに対して borederRadius と overflow: 'hidden' を指定するのが良さそうでした。

<View
  style={{ borderRadius: 100, overflow: 'hidden' }}>
  <RadialGradient
    style={{ width: 200, height: 200 }}
    colors={['black', 'green', 'blue', 'red']}>
    ......
  </RadialGradient>
</View>

よく見ると若干縁がギザギザに見える気もしますが…とりあえず、一旦はこんな感じで！

GitHub とサンプルコードを見れば、初めて使う方にでも結構簡単に実装できるかと思います。
実際、ちょっと手こずる場面もありましたが、上で紹介していたガラス風の立体的なボタンもその日のうちに実装出来ました！

以上、React Native で円形のグラデーションを実装できるライブラリ「react-native-radial-gradient」のご紹介でした。
ご参考になれば幸いです。