🎨
React Native で文字にグラデーションをつける
ソースコード
コンポーネント
文字色、あるいは文字のボーダーにグラデーションをつける例です。固定値の部分は 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
こちらだと、masked-view が web に対応していないため（？）か Storybook で表示されず困ったため、react-native-svg を利用した実装にしてみました。
参考
下記の記事を参考にさせていただきました。ぜひ元記事の方にも Like を。
Discussion