4
A universal RN Text component with a gradient overlay that works on web and mobi...
source link: https://reactnativeexample.com/a-universal-rn-text-component-with-a-gradient-overlay-that-works-on-web-and-mobile/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A universal RN Text component with a gradient overlay that works on web and mobile
Aug 12, 2023
1 min read
Universal Gradient Text 🌌
Simplest way to add gradient texts to universal React Native Projects
A universal text component with a gradient overlay that works on web and mobile. 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, gradient texts are done with CSS.
Installation
yarn add universal-gradient-text
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. Update your next.config.js:
...
transpilePackages: [
...
'universal-gradient-text',
'expo-linear-gradient',
'@react-native-masked-view'
],
...
Usage
For instructions on how to use the library, see the docs website.
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK