Gradient — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add gradient

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Un degradado lineal sin dependencia nativa. React Native no trae uno en el rango soportado (Expo SDK 54–57), así que este lo compone con bandas.
colors — Las paradas, en orden. Un solo color pinta plano; cada par consecutivo arma su propio tramo.
direction — vertical, horizontal, diagonal o diagonal-reverse. Las diagonales rotan un plano √2, así que no hay que medir el contenedor.
steps — Bandas por tramo. Más bandas es más suave y más pesado en el árbol de vistas; 24 es el default y alcanza para casi todo.
children — El contenido va por encima del degradado y sigue siendo tocable — el degradado nunca se queda con el toque.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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>

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`colors`	`string[]`	—	Paradas del degradado. Uno solo pinta plano; ninguno no pinta nada.
`direction?`	`'vertical' \| 'horizontal' \| 'diagonal' \| 'diagonal-reverse'`	vertical	'vertical' va de arriba a abajo, 'horizontal' de izquierda a derecha, 'diagonal' de arriba-izquierda a abajo-derecha y 'diagonal-reverse' de arriba-derecha a abajo-izquierda.
`steps?`	`number`	24	Bandas por tramo (un tramo = un par de colores consecutivos). Más bandas = transición más suave y más vistas en el árbol.
`children?`	`ReactNode`	—	Contenido por encima del degradado.
`style?`	`StyleProp<ViewStyle>`	—	—