react-native-linear-gradient-text

---

About

Component to display text with linear gradient

---

Installation

$3

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

$3

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 (

colors={['#E76F00', '#EA374E']}
text="Hello World"
start={{ x: 0.5, y: 0 }} // Optional
end={{ x: 1, y: 1 }} // Optional
textStyle={{ fontSize: 40 }} // Optional
textProps={{ allowFontScaling: true }} // Optional
/>

);
};

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 | Default Value | A property to change all styles that a text has.
| textProps | TextProps | Default Value | A property to apply native props to text. |

---

Author

Henrique Luís Oliveira Marques

---

Contributors

- MATERIALBLOCK

License

This project is under the MIT license. See the LICENSE to learn more.


Contact!