Gradient — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add gradient

Or install the whole package and import it

pnpm add orn-ui
import { Gradient } from 'orn-ui/gradient';

Depends on:core (theme + icons)

Usage

when to use — A linear gradient with no native dependency. React Native has none across Expo SDK 54–57, so this composes one out of bands.
colors — The stops, in order. One colour paints flat; each consecutive pair becomes its own segment.
direction — vertical, horizontal, diagonal or diagonal-reverse. Diagonals rotate a √2 plane, so no measuring is involved.
steps — Bands per segment. More is smoother and heavier in the view tree; 24 is the default and enough for most surfaces.
children — Content sits above the gradient and stays tappable — the gradient never takes the touch.

Demo clip not recorded yet — see MEDIA.md

Variants

direction: vertical / horizontal

<View style={{ width: '100%', gap: 12 }}>
  <Gradient colors={['#004cef', '#00cae1']} style={BOX} />
  <Gradient colors={['#004cef', '#00cae1']} direction="horizontal" style={BOX} />
</View>

direction: diagonal / diagonal-reverse

<VariantRow>
  <Gradient colors={['#7b2ff7', '#f107a3']} direction="diagonal" style={TILE} />
  <Gradient colors={['#7b2ff7', '#f107a3']} direction="diagonal-reverse" style={TILE} />
</VariantRow>

several stops — one segment per pair of colors

<Gradient colors={['#0f9b0f', '#00cae1', '#004cef', '#7b2ff7']} direction="horizontal" style={BOX} />

steps: 3 (visible banding) vs 24 (default)

<View style={{ width: '100%', gap: 12 }}>
  <Gradient colors={['#101014', '#00cae1']} steps={3} style={BOX} />
  <Gradient colors={['#101014', '#00cae1']} style={BOX} />
</View>

children stay tappable — the gradient never takes the touch

<Gradient
  colors={['#004cef', '#00cae1']}
  direction="diagonal"
  style={{ ...BOX, alignItems: 'center', justifyContent: 'center', gap: 8 }}
>
  <Body style={{ color: colors.white }}>Content sits on top</Body>
  <Button title="Press me" variant="secondary" onPress={() => {}} />
</Gradient>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'direction: vertical / horizontal',
    content: (
      <View style={{ width: '100%', gap: 12 }}>
        <Gradient colors={['#004cef', '#00cae1']} style={BOX} />
        <Gradient colors={['#004cef', '#00cae1']} direction="horizontal" style={BOX} />
      </View>
    ),
  },
  {
    label: 'direction: diagonal / diagonal-reverse',
    content: (
      <VariantRow>
        <Gradient colors={['#7b2ff7', '#f107a3']} direction="diagonal" style={TILE} />
        <Gradient colors={['#7b2ff7', '#f107a3']} direction="diagonal-reverse" style={TILE} />
      </VariantRow>
    ),
  },
  {
    label: 'several stops — one segment per pair of colors',
    content: <Gradient colors={['#0f9b0f', '#00cae1', '#004cef', '#7b2ff7']} direction="horizontal" style={BOX} />,
  },
  {
    label: 'steps: 3 (visible banding) vs 24 (default)',
    content: (
      <View style={{ width: '100%', gap: 12 }}>
        <Gradient colors={['#101014', '#00cae1']} steps={3} style={BOX} />
        <Gradient colors={['#101014', '#00cae1']} style={BOX} />
      </View>
    ),
  },
  {
    label: 'children stay tappable — the gradient never takes the touch',
    content: (
      <Gradient
        colors={['#004cef', '#00cae1']}
        direction="diagonal"
        style={{ ...BOX, alignItems: 'center', justifyContent: 'center', gap: 8 }}
      >
        <Body style={{ color: colors.white }}>Content sits on top</Body>
        <Button title="Press me" variant="secondary" onPress={() => {}} />
      </Gradient>
    ),
  },
];

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`colors`	`string[]`	—	Gradient stops. One alone paints flat; none paints nothing.
`direction?`	`'vertical' \| 'horizontal' \| 'diagonal' \| 'diagonal-reverse'`	vertical	'vertical' runs top to bottom, 'horizontal' left to right, 'diagonal' top-left to bottom-right and 'diagonal-reverse' top-right to bottom-left.
`steps?`	`number`	24	Bands per segment (a segment = a pair of consecutive colours). More bands = smoother transition and more views in the tree.
`children?`	`ReactNode`	—	Content drawn above the gradient.
`style?`	`StyleProp<ViewStyle>`	—	—