Slides — componente React Native

Instalación

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

npx orn-ui add slides

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Slides } from 'orn-ui/slides';

Depende de:core (theme + icons)transition gradient

Uso

cuándo usarlo — Onboarding, un tour de features, un carrusel. Todo lo que sea un panel completo por vez y no una lista.
data / keyExtractor / renderItem — Genérico sobre el tipo del item, como una lista: el contenido de la slide lo renderizás vos.
background — Por slide: un color pinta plano, varios arman un Gradient detrás del contenido.
autoPlay / interval — Avanza solo y se pausa mientras el dedo arrastra. showAutoPlayToggle viene en true porque contenido que se mueve solo necesita una forma de frenarlo (WCAG 2.2.2).
indicators / indicatorPlacement — Círculos o números, apoyados sobre la slide en blanco o afuera del área deslizable con los colores del tema.
index / defaultIndex / onIndexChange — Controlado o no controlado, el mismo par que el resto de la librería.

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

Variantes

horizontal · gradient · dots · infinite + autoPlay

<View style={STAGE}>
  <Slides
    data={SLIDES}
    keyExtractor={(item) => item.id}
    background={(item) => item.gradient}
    renderItem={(item) => <Panel slide={item} />}
    loop
    autoPlay
    interval={2500}
  />
</View>

numbered indicators · flat colors · finite · button inside

<View style={{ width: '100%', gap: 8 }}>
  <View style={STAGE}>
    <Slides
      data={SLIDES}
      keyExtractor={(item) => item.id}
      background={(item, index) => FLAT[index]}
      renderItem={(item) => <Panel slide={item} onPress={() => setTapped(item.title)} />}
      indicators="numbers"
    />
  </View>
  <Body>{tapped ? `pressed: ${tapped}` : 'press the button inside a slide'}</Body>
</View>

vertical orientation

<View style={STAGE}>
  <Slides
    data={SLIDES}
    keyExtractor={(item) => item.id}
    background={(item) => item.gradient}
    renderItem={(item) => <Panel slide={item} />}
    orientation="vertical"
  />
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'horizontal · gradient · dots · infinite + autoPlay',
    content: (
      <View style={STAGE}>
        <Slides
          data={SLIDES}
          keyExtractor={(item) => item.id}
          background={(item) => item.gradient}
          renderItem={(item) => <Panel slide={item} />}
          loop
          autoPlay
          interval={2500}
        />
      </View>
    ),
  },
  {
    label: 'numbered indicators · flat colors · finite · button inside',
    content: (
      <View style={{ width: '100%', gap: 8 }}>
        <View style={STAGE}>
          <Slides
            data={SLIDES}
            keyExtractor={(item) => item.id}
            background={(item, index) => FLAT[index]}
            renderItem={(item) => <Panel slide={item} onPress={() => setTapped(item.title)} />}
            indicators="numbers"
          />
        </View>
        <Body>{tapped ? `pressed: ${tapped}` : 'press the button inside a slide'}</Body>
      </View>
    ),
  },
  {
    label: 'vertical orientation',
    content: (
      <View style={STAGE}>
        <Slides
          data={SLIDES}
          keyExtractor={(item) => item.id}
          background={(item) => item.gradient}
          renderItem={(item) => <Panel slide={item} />}
          orientation="vertical"
        />
      </View>
    ),
  },
];

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
`data`	`T[]`	—	—
`keyExtractor`	`(item: T, index: number) => string`	—	—
`renderItem`	`(item: T, index: number) => ReactNode`	—	Contenido de la slide: imágenes, botones, lo que sea. Se dibuja sobre `background`.
`background?`	`(item: T, index: number) => SlideBackground`	—	Fondo por slide: `'#101014'` pinta plano, `['#004cef', '#00cae1']` degrada.
`gradientDirection?`	`'vertical' \| 'horizontal' \| 'diagonal' \| 'diagonal-reverse'`	vertical	Dirección del degradado cuando `background` devuelve varios colores.
`orientation?`	`'vertical' \| 'horizontal'`	horizontal	—
`indicators?`	`'dots' \| 'numbers' \| 'none'`	dots	Círculos, círculos numerados, o ninguno.
`indicatorPlacement?`	`'overlay' \| 'outside'`	overlay	'overlay' los apoya sobre la slide, en blanco; 'outside' los saca fuera del área deslizable, con los colores del tema.
`loop?`	`boolean`	false	Después de la última vuelve a la primera (y al revés).
`autoPlay?`	`boolean`	false	Avanza solo. Se pausa mientras el dedo arrastra.
`interval?`	`number`	4000	ms entre avances de `autoPlay`.
`showAutoPlayToggle?`	`boolean`	true	Botón para frenar el avance automático. Sólo aparece con `autoPlay`, y va en `true` porque contenido que se mueve solo necesita una forma de pausarlo (WCAG 2.2.2).
`spacing?`	`number`	0	Hueco entre slides, en px. En 0 quedan pegadas.
`index?`	`number`	—	Índice controlado. Sin él, el componente maneja el suyo desde `defaultIndex`.
`defaultIndex?`	`number`	0	—
`onIndexChange?`	`(index: number) => void`	—	—
`height?`	`number`	240	Alto del área deslizable.
`swipeEnabled?`	`boolean`	true	—
`slideStyle?`	`StyleProp<ViewStyle>`	—	Estilos de la caja visible de cada slide — padding, alineación, radio.
`style?`	`StyleProp<ViewStyle>`	—	—