react-native-gradient-texts

About

react-native-gradient-texts is React Native component for different Gradient styled Texts for iOS & Android.

---

Installation

1. Install library

   from npm

   1npm install react-native-gradient-texts

   from yarn

   1yarn add react-native-gradient-texts

• Make sure that you have installed the react-native-svg libarary.

2. Link native code

   1cd ios && pod install

---

Example

1. Gradient Text with Gradient Border

1import React from "react";
2import { StyleSheet, SafeAreaView } from "react-native";
3import GradientText from "react-native-gradient-texts";
4
5const App = () => {
6  return (
7    <SafeAreaView style={styles.container}>
8      <GradientText
9        text={"GRADIENT TEXT"}
10        fontSize={40}
11        isGradientFill
12        isGradientStroke
13        strokeWidth={2}
14        style={{ backgroundColor: "black" }}
15        width={420}
16        locations={{ x: 210, y: 65 }}
17        borderColors={["#adfda2", "#11d3f3"]}
18        gradientColors={["#6710c2", "#c81d77"]}
19        fontFamily={"Gill Sans"}
20      />
21    </SafeAreaView>
22  );
23};
24
25export default App;
26
27const styles = StyleSheet.create({
28  container: {
29    flex: 1,
30    alignItems: "center",
31    justifyContent: "center",
32  },
33});

2. Gradient Stroke Text

1<GradientText
2    text={'GRADIENT STROKE'}
3    fontSize={35}
4    isGradientStroke
5    width={420}
6    locations={{x: 210, y: 65}}
7    strokeWidth={1.2}
8    fontFamily={'Rockwell'}
9/>
10<GradientText
11    text={'GRADIENT STROKE'}
12    fontSize={40}
13    style={{backgroundColor: 'black'}}
14    isGradientStroke
15    strokeWidth={2}
16    width={420}
17    locations={{x: 210, y: 65}}
18    borderColors={['#b429f9', '#fdbb2d']}
19/>

3. Bordered Text

1<GradientText
2  text={"STROKED TEXT"}
3  fontSize={50}
4  fillColor={"#fdbb2d"}
5  width={420}
6  locations={{ x: 210, y: 75 }}
7  strokeWidth={1.5}
8  strokeColor={"#22c1c3"}
9  fontFamily={"Marker Felt"}
10/>

4. Simple Gradient Text

1<GradientText
2  text={"GRADIENT TEXT"}
3  fontSize={45}
4  width={420}
5  locations={{ x: 210, y: 65 }}
6  isGradientFill
7  gradientColors={["#22c1c3", "#fdbb2d"]}
8/>

---

Props

Props	Params Type	Default	Description
text (Required)	String	''	Text to be display
height	Number	100	SVG height
width	Number	300	SVG width
gradientColors	[String, String]	['#810955', '#533483']	Colors for text Gradient
borderColors	[String, String]	['#b429f9', '#26c5f3']	Colors for text Border/Stroke
locations	{x: Number; y: Number}	{x: 150, y: 80}	Distance on x, y axis
start	{x: Number; y: Number}	{x: 0, y: 0}	Start of the gradient on the x, y axis
end	{x: Number; y: Number}	{x: 1, y: 1}	End of the gradient on the x, y axis
isGradientFill	Boolean	false	For gradient text
fillColor	String	'#FFFFFF'	For single colored text
isGradientStroke	Boolean	false	For gradient Text Border
strokeColor	String	'#000000'	For simple text border
strokeWidth	Number	0	Text border Width
fontSize	Number	18	Customize font size
fontFamily	String	'Avenir Next'	Customize font family
fontWeight	String or Number	900	Customize font weight
style	ViewStyle	{}	Styling for container view

---

Author

Drashti Sabhaya

---

License

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