React-native-linear-gradient-text NPM

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

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

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradientText } from 'react-native-linear-gradient-text';

export const App = () => {
  return (
    <View style={styles.container}>
      <LinearGradientText
        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
      />
    </View>
  );
};

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.