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

   npm install react-native-gradient-texts

   from yarn

   yarn add react-native-gradient-texts

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

3. Link native code

   cd ios && pod install

Example

1. Gradient Text with Gradient Border

import React from "react";
import { StyleSheet, SafeAreaView } from "react-native";
import GradientText from "react-native-gradient-texts";

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <GradientText
        text={"GRADIENT TEXT"}
        fontSize={40}
        isGradientFill
        isGradientStroke
        strokeWidth={2}
        style={{ backgroundColor: "black" }}
        width={420}
        locations={{ x: 210, y: 65 }}
        borderColors={["#adfda2", "#11d3f3"]}
        gradientColors={["#6710c2", "#c81d77"]}
        fontFamily={"Gill Sans"}
      />
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

1. Gradient Stroke Text

<GradientText
    text={'GRADIENT STROKE'}
    fontSize={35}
    isGradientStroke
    width={420}
    locations={{x: 210, y: 65}}
    strokeWidth={1.2}
    fontFamily={'Rockwell'}
/>
<GradientText
    text={'GRADIENT STROKE'}
    fontSize={40}
    style={{backgroundColor: 'black'}}
    isGradientStroke
    strokeWidth={2}
    width={420}
    locations={{x: 210, y: 65}}
    borderColors={['#b429f9', '#fdbb2d']}
/>

1. Bordered Text

<GradientText
  text={"STROKED TEXT"}
  fontSize={50}
  fillColor={"#fdbb2d"}
  width={420}
  locations={{ x: 210, y: 75 }}
  strokeWidth={1.5}
  strokeColor={"#22c1c3"}
  fontFamily={"Marker Felt"}
/>

1. Simple Gradient Text

<GradientText
  text={"GRADIENT TEXT"}
  fontSize={45}
  width={420}
  locations={{ x: 210, y: 65 }}
  isGradientFill
  gradientColors={["#22c1c3", "#fdbb2d"]}
/>

Props

Author

Drashti Sabhaya

License

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