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

1yarn add react-native-linear-gradient-text
2# or
3npm install react-native-linear-gradient-text

---

Usage

1import React from 'react';
2import { View, StyleSheet } from 'react-native';
3import { LinearGradientText } from 'react-native-linear-gradient-text';
4
5export const App = () => {
6  return (
7    <View style={styles.container}>
8      <LinearGradientText
9        colors={['#E76F00', '#EA374E']}
10        text="Hello World"
11        start={{ x: 0.5, y: 0 }}  // Optional
12        end={{ x: 1, y: 1 }}  // Optional
13        textStyle={{ fontSize: 40 }}  // Optional
14        textProps={{ allowFontScaling: true }}  // Optional
15      />
16    </View>
17  );
18};
19
20const styles = StyleSheet.create({
21  container: {
22    flex: 1,
23    alignItems: 'center',
24    justifyContent: 'center',
25  },
26});

---

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!