【ReactNative開発】グラデーションカラーを使えるようにする方法

こんばんは。今日は、React Nativeで開発するアプリUIの背景色にグラデーションカラーを使えるようにしていきたいと思います。

必要なライブラリをプロジェクトに追加する

初めに、ライブラリを追加します。

React NativeでGradient Colorを利用するためには、追加のライブラリが必要なようです。

以下が、いろんなブログ等で紹介されているライブラリです。

React-Native-Linear-Gradient

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

yarn add react-native-linear-gradient

が、私のプロジェクトではこのライブラリは以下のエラーが出てうまく動きませんでした。。

requireNativeComponent: "BVLinearGradient" was not found in the UIManager.

こちらにDiscussionがありましたが、Expoを使っている場合は、このライブラリでは動かないという噂もありました。そこで最終的には以下のライブラリを利用して解決しました。

https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/503#issuecomment-842687909

Expo-Linear-Gradient

yarn add linear-gradient

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

アプリコードを書く

上記いずれを利用しても、お作法はほとんど同じで利用できます。以下は公式ページでも紹介されている、Expoで動いているコードになります。

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({ ... }); 

このLinearGradientコンポーネントのcolors属性をいじると・・・

できた！

以上、React NativeでGradient Colorを扱う方法のご紹介でした！お役に立ちましたら幸いです。

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。