@furkankaya/react-native-linear-text-gradient
About
A React Native component for rendering text with a beautiful linear gradient background
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:
Step 2: Install react-native-linear-gradient library
Make sure that you have installed the react-native-linear-gradient library:
Getting Started
yarn add @furkankaya/react-native-linear-text-gradient
# or
npm install @furkankaya/react-native-linear-text-gradientUsage
import { StyleSheet, Text, View } from "react-native";
import React from "react";
import TextGradient from "./src/textGradient";
const App = () => {
return (
<View style={styles.container}>
<TextGradient
style={{ fontWeight: "bold", fontSize: 30 }}
locations={[0, 1]}
colors={["red", "blue"]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
text="THIS IS TEXT GRADIENT"
/>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "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={["red", "blue"]}. |
| 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: 0 } | Same as start, but for the of the gradient. |
| style | TextStyle | Default Value | A property to change all styles that a text has. |
Author
Furkan Kaya
License
This project is under the MIT license. See the LICENSE to learn more.