https://github.com/henriquemarquesdev/react-native-linear-gradient-text
Component to display text with linear gradient.
https://github.com/henriquemarquesdev/react-native-linear-gradient-text
gradient gradient-text react react-native react-native-linear-gradient
Last synced: 2 months ago
JSON representation
Component to display text with linear gradient.
- Host: GitHub
- URL: https://github.com/henriquemarquesdev/react-native-linear-gradient-text
- Owner: henriquemarquesdev
- License: mit
- Created: 2022-06-08T16:09:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-19T20:14:16.000Z (12 months ago)
- Last Synced: 2025-01-19T20:14:50.689Z (12 months ago)
- Topics: gradient, gradient-text, react, react-native, react-native-linear-gradient
- Language: Java
- Homepage: https://www.npmjs.com/package/react-native-linear-gradient-text
- Size: 1.79 MB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
react-native-linear-gradient-text
---
## About
Component to display text with linear gradient
---
## Installation
### Step 1: Install @react-native-masked-view/masked-view library
Make sure that you have installed the `@react-native-masked-view/masked-view` library:
- https://github.com/react-native-masked-view/masked-view#getting-started
### Step 2: Install react-native-linear-gradient library
Make sure that you have installed the `react-native-linear-gradient` library:
- https://github.com/react-native-linear-gradient/react-native-linear-gradient#installation
---
## Getting Started
```sh
yarn add react-native-linear-gradient-text
# or
npm install react-native-linear-gradient-text
```
---
## Usage
```js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradientText } from 'react-native-linear-gradient-text';
export const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
```
---
## Props
| Prop | Type | Default | Description |
| --------- | ---------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- |
| text | string | **Required** | An string that display text. Example: `text="Hello World"` |
| colors | string[] | **Required** | An array of at least two color values that represent gradient colors. Example: `colors={["black", "white"]}`. |
| start | { x: number, y: number } | { x: 0.5, y: 0 } | An optional prop. He declare the position that the gradient starts. Example `start={{ x: 0.5, y: 0 }}`. |
| end | { x: number, y: number } | { x: 1, y: 1 } | Same as start, but for the of the gradient. |
| textStyle | [TextStyle](https://reactnative.dev/docs/text-style-props) | Default Value | A property to change all styles that a text has.
| textProps | [TextProps](https://reactnative.dev/docs/text-style-props#props) | Default Value | A property to apply native props to text. |
---
## Author
Henrique Luís Oliveira Marques
---
## Contributors
- [
](https://github.com/BLOCKMATERIAL) [MATERIALBLOCK](https://github.com/BLOCKMATERIAL)
## License
This project is under the MIT license. See the [LICENSE](./LICENSE) to learn more.
[Contact!](https://www.linkedin.com/in/hlom)