Universal Gradient Text

🌌

Installation

The library works with Expo and NextJS out of the box. To install simply run:

yarn add universal-gradient-text

Under the hood, the library has dependencies on expo-linear-gradient & @react-native-masked-view/masked-view. As a result, you will need Expo Modules to be setup for bare RN projects. On web, text gradients are done with CSS.

Expo

In Expo apps, you will also need to add the following dependencies:

npx expo install expo-linear-gradient @react-native-masked-view/masked-view

NextJS

On Next, you will need to follow extra steps to transpile the library. Your project will need to be setup to use Expo with React Native. Update your next.config.js:

...
transpilePackages: [
  ...
  'universal-gradient-text',
  'expo-linear-gradient',
  '@react-native-masked-view'
],
...

Usage

<GradientText
  style={{ fontWeight: "700", fontSize: 32 }}
  colors={["#4ebcf4", "#6b40ba"]}
  direction="rtl"
>
  Universal Gradient Text
</GradientText>

Props