@yahya10shoaib/react-native-gradient-text

A React Native component for rendering text with customizable linear gradient styling.

Installation

yarn add @yahya10shoaib/react-native-gradient-text

or with npm:

npm install @yahya10shoaib/react-native-gradient-text

Peer dependencies: Ensure react-native-linear-gradient and @react-native-masked-view/masked-view are installed. They are declared as peer dependencies; npm 7+ installs them automatically, but Yarn does not. If needed:

yarn add react-native-linear-gradient @react-native-masked-view/masked-view

Expo users: react-native-linear-gradient is a native module. Rebuild your dev client after installing: npx expo prebuild --clean then npx expo run:ios or npx expo run:android.

Usage

Basic gradient text:

import GradientText from '@yahya10shoaib/react-native-gradient-text';

<GradientText
  style={{fontSize: 24, fontWeight: 'bold'}}
  colors={['#FCB515', '#F7931E']}
  start={{x: 0, y: 1}}
  end={{x: 0, y: 0}}>
  Hello Gradient
</GradientText>;

Solid color text (no gradient): Set showGradient={false} to render the text in a solid color using the first value from colors, or the default fallback.

<GradientText
  showGradient={false}
  colors={['#FCB515', '#F7931E']}
  style={{fontSize: 18}}>
  Solid Text
</GradientText>

Props

| Prop | Type | Default | Description | | --------------- | ------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------- | | children | ReactNode | — | Text content | | style | StyleProp<TextStyle> | — | Text styles | | showGradient | boolean | true | When true, renders gradient text. When false, renders solid color text using the first value from colors. | | colors | [ColorValue, ColorValue, ...] | ['#000', '#fff'] | Gradient colors | | start | { x: number; y: number } | { x: 0, y: 1 } | Gradient start point (0–1) | | end | { x: number; y: number } | { x: 0, y: 0 } | Gradient end point (0–1) | | gradientProps | LinearGradientProps | — | Extra props passed to LinearGradient |

All standard React Native Text props are supported.

License

MIT