Package Exports

react-native-linear-gradient-text
react-native-linear-gradient-text/lib/commonjs/index.js
react-native-linear-gradient-text/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-linear-gradient-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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 }}
        end={{ x: 1, y: 1 }}
        textStyle={{ fontSize: 40 }}
      />
    </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.

Author

Henrique Luís Oliveira Marques

License

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