react-native-lite-text-gradient

A lightweight React Native component for rendering horizontal linear gradient text using SVG. Zero native modules — works on both iOS and Android out of the box.

Requirements

• react-native-svg >= 12.0.0

Installation

npm install react-native-lite-text-gradient react-native-svg

or

yarn add react-native-lite-text-gradient react-native-svg

Usage

import { TextGradient } from 'react-native-lite-text-gradient';

export default function App() {
  return (
    <TextGradient
      text="Hello Gradient"
      fontSize={28}
      colors={['#739FFF', '#A131F9']}
    />
  );
}

Custom colors and stop locations

<TextGradient
  text="Three Colors"
  fontSize={24}
  colors={['#FF6B6B', '#FFD93D', '#6BCB77']}
  locations={[0, 0.5, 1]}
/>

Fixed size

<TextGradient
  text="Fixed Size"
  fontSize={20}
  width={200}
  height={40}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | text | string | required | The text to render. | | fontSize | number | required | Font size in pixels. | | colors | string[] | ['#739FFF', '#A131F9'] | Array of gradient colors (min 2). | | locations | number[] | evenly distributed | Stop positions for each color, values between 0 and 1. Length must match colors. | | fontWeight | string | '600' | Font weight (e.g. '400', '700', 'bold'). | | width | number | auto | SVG width. Auto-estimated from text length when omitted. | | height | number | auto | SVG height. Auto-estimated from fontSize when omitted. | | horizontalPadding | number | auto | Extra horizontal space added to each side. Auto-estimated when omitted. |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT