🎨

React Native で文字にグラデーションをつける

2022/12/05に公開

ソースコード

コンポーネント

文字色、あるいは文字のボーダーにグラデーションをつける例です。固定値の部分は props で渡すようにしてあげれば、より柔軟なコンポーネントにすることもできます。用途に合わせて変更を加えてください。

GradientText.tsx
import Svg, { Defs, LinearGradient, Stop, Text } from 'react-native-svg';

const GradientText = (props: {
  colors: string[];
  text: string;
  useBorderGradient?: boolean;
  useInnerGradient?: boolean;
}) => (
  <Svg height="100" width="200">
    <Defs>
      <LinearGradient id="gradient-text" x1={0} y1={0} x2={0} y2={1}>
        {props.colors.map((color, idx) => (
          <Stop
            key={idx}
            offset={(1 / (props.colors.length - 1)) * idx}
            stopColor={color}
            stopOpacity="1"
          />
        ))}
      </LinearGradient>
    </Defs>
    <Text
      fill={props.useInnerGradient ? 'url(#gradient-text)' : 'none'}
      strokeWidth="1.5"
      stroke={props.useBorderGradient ? 'url(#gradient-text)' : 'none'}
      fontSize="30"
      fontWeight="bold"
      fontFamily="Verdana"
      x="100"
      y="70"
      alignmentBaseline="middle"
      textAnchor="middle"
    >
      {props.text}
    </Text>
  </Svg>
);

export { GradientText };

利用例

// 文字色にグラデーションを適用する場合
<GradientText
  colors={['#e60000', '#f39800', '#009944', '#0068b7', '#920783']}
  text="EXCELLENT"
  useInnerGradient={true}
/>

// 文字のボーダーにグラデーションを適用する場合
<GradientText
  colors={['#e60000', '#f39800', '#009944', '#0068b7', '#920783']}
  text="EXCELLENT"
  useBorderGradient={true}
/>

表示例


動機

Text にグラデーションをつける方法を探すと、下記を組み合わせる内容がヒットします。

  • react-native-linear-gradient(expo なら expo-linear-gradient
  • masked-view

https://stackoverflow.com/questions/64138735/applying-gradient-to-text-only-in-expo-react-native

こちらだと、masked-view が web に対応していないため(?)か Storybook で表示されず困ったため、react-native-svg を利用した実装にしてみました。

参考

下記の記事を参考にさせていただきました。ぜひ元記事の方にも Like を。

https://zenn.dev/tadaedo/articles/3b7a790a88af19

Discussion