expo-linear-gradient を使って要素をグラデーションにする

expo-linear-gradient というパッケージの紹介です。

色がグラデーションになった要素を配置できます。 背景をグラデーションにしたりボタンをグラデーションにしたりすることで、デザインの選択肢も増えて便利です。

概要

• ドキュメント
• インストール
• 実装
• 応用
• Expo を使わない場合

ドキュメント

https://docs.expo.dev/versions/latest/sdk/linear-gradient/

インストール

Expo を導入済みであればいつも通り以下のコマンドでインストールします。

expo install expo-linear-gradient

実装

実装は以下のようになります。

用意されている LinearGradient コンポーネントに色を配列で指定することで、グラデーション要素を実装できます。 色の配列は要素を 2つ以上設定でき、多く色を設定すると虹色のような複雑なグラデーションも可能です。

コンポーネント自体は空の要素として配置でき、親要素として配置して中にテキストやアイコンを入れられます。

import { LinearGradient } from 'expo-linear-gradient';

~~~
      <LinearGradient
        colors={["#5c76bf", "#a4b9ed"]}
        style={styles.button}>
        <MaterialIcons
          name="loupe"
          size={40}
          style={styles.buttonIcon}
          color={Colors.white}
        />
      </LinearGradient>

応用

指定の際に、開始点や終点など色が変化する場所を指定できます。

      <LinearGradient
        colors={["#5c76bf", "#a4b9ed"]}
        start={{ x: 0.1, y: 0.3 }}
        // end={{ x: 0.9, y: 0.9 }}
        locations={[0.1, 0.4]}
        style={styles.button}>
        <MaterialIcons
          name="loupe"
          size={40}
          style={styles.buttonIcon}
          color={Colors.white}
        />
      </LinearGradient>

start

グラデーションの開始位置を指定できます。 { x: 0.1, y: 0.3 } のように、x軸と y軸の位置を指定します。0 ~ 1 までの値を指定でき、パーセントでの位置指定になります。

end

グラデーションの終了位置を指定できます。 start と同様の指定方法になっていて、{ x: 0.9, y: 0.7 } と x軸と y軸の位置を指定します。

location

色が切り替わる場所を定義できます。 colors で指定した色数と同じ要素数の配列を渡す必要があり、対応する色要素の切り替わり地点を 0 ~ 1までの値で指定します。

Expo を使わない場合

react-native-linear-garadient を使えます。使い方はほとんど一緒なので、ドキュメント通りにやれば同じように実装できます。

https://github.com/react-native-linear-gradient/react-native-linear-gradient

おわりに

画像や複雑なコンポーネントを用意しなくても、グラデーションを設定することでデザインの幅が出ます。 色の使い方や置き方によっては目立つボタンにもできますし、さりげなく見やすい意匠も用意できます。

簡単に実装ができるので、積極的に使いこなせると頼もしいです。