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. |

Author

Contributors

• MATERIALBLOCK

License

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