Skip to content

HMDarkFir3/react-native-linear-gradient-text

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!