react-native-linear-gradient-text
TypeScript icon, indicating that this package has built-in type declarations

1.2.8 • Public • Published

react-native-linear-gradient-text

NPM package version NPM package downloads GitHub last commit Repository issues size License


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:

Step 2: Install react-native-linear-gradient library

Make sure that you have installed the react-native-linear-gradient library:


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.

Author

Henrique Luís Oliveira Marques


Contributors

License

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

Package Sidebar

Install

npm i react-native-linear-gradient-text

Weekly Downloads

207

Version

1.2.8

License

MIT

Unpacked Size

20.7 kB

Total Files

20

Last publish

Collaborators

  • hmdarkfire